Skip to main content

This is an internal development app.

To learn how to design and build digital services, visit the design system in the NHS digital service manual for guidance and examples.

Do and Don't list

These examples are used for automated tests and may not follow service manual best practice.

Do and Don't list default

Open this example in a new tab: Do and Don't list default

Do

  • cover blisters with a soft plaster or padded dressing
  • wash your hands before touching a burst blister
  • allow the fluid in a burst blister to drain before covering it with a plaster or dressing
Code

Markup

<div class="nhsuk-card nhsuk-card--feature">
  <div class="nhsuk-card__content">
    <h3 class="nhsuk-card__heading">
      Do
    </h3>
    <ul class="nhsuk-list nhsuk-list--tick" role="list">
      <li>
        <svg class="nhsuk-icon nhsuk-icon--tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M11.4 18.8a2 2 0 0 1-2.7.1h-.1L4 14.1a1.5 1.5 0 0 1 2.1-2L10 16l8.1-8.1a1.5 1.5 0 1 1 2.2 2l-8.9 9Z"/>
        </svg>
        cover blisters with a soft plaster or padded dressing
      </li>
      <li>
        <svg class="nhsuk-icon nhsuk-icon--tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M11.4 18.8a2 2 0 0 1-2.7.1h-.1L4 14.1a1.5 1.5 0 0 1 2.1-2L10 16l8.1-8.1a1.5 1.5 0 1 1 2.2 2l-8.9 9Z"/>
        </svg>
        wash your hands before touching a burst blister
      </li>
      <li>
        <svg class="nhsuk-icon nhsuk-icon--tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M11.4 18.8a2 2 0 0 1-2.7.1h-.1L4 14.1a1.5 1.5 0 0 1 2.1-2L10 16l8.1-8.1a1.5 1.5 0 1 1 2.2 2l-8.9 9Z"/>
        </svg>
        allow the fluid in a burst blister to drain before covering it with a plaster or dressing
      </li>
    </ul>
  </div>
</div>

Macro

{% from "do-dont-list/macro.njk" import list -%}

{{ list({
  title: "Do",
  icon: "tick",
  items: [
    {
      text: "cover blisters with a soft plaster or padded dressing"
    },
    {
      text: "wash your hands before touching a burst blister"
    },
    {
      text: "allow the fluid in a burst blister to drain before covering it with a plaster or dressing"
    }
  ]
}) }}

Do and Don't list (do) with custom prefix

Open this example in a new tab: Do and Don't list (do) with custom prefix

Do

  • always cover blisters with a soft plaster or padded dressing
  • always wash your hands before touching a burst blister
  • always allow the fluid in a burst blister to drain before covering it with a plaster or dressing
Code

Markup

<div class="nhsuk-card nhsuk-card--feature">
  <div class="nhsuk-card__content">
    <h3 class="nhsuk-card__heading">
      Do
    </h3>
    <ul class="nhsuk-list nhsuk-list--tick" role="list">
      <li>
        <svg class="nhsuk-icon nhsuk-icon--tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M11.4 18.8a2 2 0 0 1-2.7.1h-.1L4 14.1a1.5 1.5 0 0 1 2.1-2L10 16l8.1-8.1a1.5 1.5 0 1 1 2.2 2l-8.9 9Z"/>
        </svg>
        always cover blisters with a soft plaster or padded dressing
      </li>
      <li>
        <svg class="nhsuk-icon nhsuk-icon--tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M11.4 18.8a2 2 0 0 1-2.7.1h-.1L4 14.1a1.5 1.5 0 0 1 2.1-2L10 16l8.1-8.1a1.5 1.5 0 1 1 2.2 2l-8.9 9Z"/>
        </svg>
        always wash your hands before touching a burst blister
      </li>
      <li>
        <svg class="nhsuk-icon nhsuk-icon--tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M11.4 18.8a2 2 0 0 1-2.7.1h-.1L4 14.1a1.5 1.5 0 0 1 2.1-2L10 16l8.1-8.1a1.5 1.5 0 1 1 2.2 2l-8.9 9Z"/>
        </svg>
        always allow the fluid in a burst blister to drain before covering it with a plaster or dressing
      </li>
    </ul>
  </div>
</div>

Macro

{% from "do-dont-list/macro.njk" import list -%}

{{ list({
  title: "Do",
  icon: "tick",
  prefixText: "always",
  items: [
    {
      text: "cover blisters with a soft plaster or padded dressing"
    },
    {
      text: "wash your hands before touching a burst blister"
    },
    {
      text: "allow the fluid in a burst blister to drain before covering it with a plaster or dressing"
    }
  ]
}) }}

Do and Don't list (do) with empty items

Open this example in a new tab: Do and Don't list (do) with empty items

Do

  • cover blisters with a soft plaster or padded dressing
  • wash your hands before touching a burst blister
Code

Markup

<div class="nhsuk-card nhsuk-card--feature">
  <div class="nhsuk-card__content">
    <h3 class="nhsuk-card__heading">
      Do
    </h3>
    <ul class="nhsuk-list nhsuk-list--tick" role="list">
      <li>
        <svg class="nhsuk-icon nhsuk-icon--tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M11.4 18.8a2 2 0 0 1-2.7.1h-.1L4 14.1a1.5 1.5 0 0 1 2.1-2L10 16l8.1-8.1a1.5 1.5 0 1 1 2.2 2l-8.9 9Z"/>
        </svg>
        cover blisters with a soft plaster or padded dressing
      </li>
      <li>
        <svg class="nhsuk-icon nhsuk-icon--tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M11.4 18.8a2 2 0 0 1-2.7.1h-.1L4 14.1a1.5 1.5 0 0 1 2.1-2L10 16l8.1-8.1a1.5 1.5 0 1 1 2.2 2l-8.9 9Z"/>
        </svg>
        wash your hands before touching a burst blister
      </li>
    </ul>
  </div>
</div>

Macro

{% from "do-dont-list/macro.njk" import list -%}

{{ list({
  title: "Do",
  icon: "tick",
  items: [
    {
      text: "cover blisters with a soft plaster or padded dressing"
    },
    {
      text: "wash your hands before touching a burst blister"
    },
    false
  ]
}) }}

Do and Don't list (don't)

Open this example in a new tab: Do and Don't list (don't)

Don't

  • do not burst a blister yourself
  • do not peel the skin off a burst blister
  • do not pick at the edges of the remaining skin
  • do not wear the shoes or use the equipment that caused your blister until it heals
Code

Markup

<div class="nhsuk-card nhsuk-card--feature">
  <div class="nhsuk-card__content">
    <h3 class="nhsuk-card__heading">
      Don&#39;t
    </h3>
    <ul class="nhsuk-list nhsuk-list--cross" role="list">
      <li>
        <svg class="nhsuk-icon nhsuk-icon--cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"/>
        </svg>
        do not burst a blister yourself
      </li>
      <li>
        <svg class="nhsuk-icon nhsuk-icon--cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"/>
        </svg>
        do not peel the skin off a burst blister
      </li>
      <li>
        <svg class="nhsuk-icon nhsuk-icon--cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"/>
        </svg>
        do not pick at the edges of the remaining skin
      </li>
      <li>
        <svg class="nhsuk-icon nhsuk-icon--cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"/>
        </svg>
        do not wear the shoes or use the equipment that caused your blister until it heals
      </li>
    </ul>
  </div>
</div>

Macro

{% from "do-dont-list/macro.njk" import list -%}

{{ list({
  title: "Don't",
  icon: "cross",
  items: [
    {
      text: "burst a blister yourself"
    },
    {
      text: "peel the skin off a burst blister"
    },
    {
      text: "pick at the edges of the remaining skin"
    },
    {
      text: "wear the shoes or use the equipment that caused your blister until it heals"
    }
  ]
}) }}

Do and Don't list (don't) with custom prefix

Open this example in a new tab: Do and Don't list (don't) with custom prefix

Never

  • never burst a blister yourself
  • never peel the skin off a burst blister
  • never pick at the edges of the remaining skin
  • never wear the shoes or use the equipment that caused your blister until it heals
Code

Markup

<div class="nhsuk-card nhsuk-card--feature">
  <div class="nhsuk-card__content">
    <h3 class="nhsuk-card__heading">
      Never
    </h3>
    <ul class="nhsuk-list nhsuk-list--cross" role="list">
      <li>
        <svg class="nhsuk-icon nhsuk-icon--cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"/>
        </svg>
        never burst a blister yourself
      </li>
      <li>
        <svg class="nhsuk-icon nhsuk-icon--cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"/>
        </svg>
        never peel the skin off a burst blister
      </li>
      <li>
        <svg class="nhsuk-icon nhsuk-icon--cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"/>
        </svg>
        never pick at the edges of the remaining skin
      </li>
      <li>
        <svg class="nhsuk-icon nhsuk-icon--cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"/>
        </svg>
        never wear the shoes or use the equipment that caused your blister until it heals
      </li>
    </ul>
  </div>
</div>

Macro

{% from "do-dont-list/macro.njk" import list -%}

{{ list({
  title: "Never",
  icon: "cross",
  prefixText: "never",
  items: [
    {
      text: "burst a blister yourself"
    },
    {
      text: "peel the skin off a burst blister"
    },
    {
      text: "pick at the edges of the remaining skin"
    },
    {
      text: "wear the shoes or use the equipment that caused your blister until it heals"
    }
  ]
}) }}

Do and Don't list (don't) with empty items

Open this example in a new tab: Do and Don't list (don't) with empty items

Don't

  • do not burst a blister yourself
  • do not peel the skin off a burst blister
  • do not pick at the edges of the remaining skin
Code

Markup

<div class="nhsuk-card nhsuk-card--feature">
  <div class="nhsuk-card__content">
    <h3 class="nhsuk-card__heading">
      Don&#39;t
    </h3>
    <ul class="nhsuk-list nhsuk-list--cross" role="list">
      <li>
        <svg class="nhsuk-icon nhsuk-icon--cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"/>
        </svg>
        do not burst a blister yourself
      </li>
      <li>
        <svg class="nhsuk-icon nhsuk-icon--cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"/>
        </svg>
        do not peel the skin off a burst blister
      </li>
      <li>
        <svg class="nhsuk-icon nhsuk-icon--cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"/>
        </svg>
        do not pick at the edges of the remaining skin
      </li>
    </ul>
  </div>
</div>

Macro

{% from "do-dont-list/macro.njk" import list -%}

{{ list({
  title: "Don't",
  icon: "cross",
  items: [
    {
      text: "burst a blister yourself"
    },
    {
      text: "peel the skin off a burst blister"
    },
    {
      text: "pick at the edges of the remaining skin"
    },
    false
  ]
}) }}

Do and Don't list (don't) with hidden prefix

Open this example in a new tab: Do and Don't list (don't) with hidden prefix

Don't

  • avoid bursting a blister yourself
  • certainly don't peel the skin off a burst blister
  • absolutely do not pick at the edges of the remaining skin
  • please don't wear the shoes or use the equipment that caused your blister until it heals
Code

Markup

<div class="nhsuk-card nhsuk-card--feature">
  <div class="nhsuk-card__content">
    <h3 class="nhsuk-card__heading">
      Don&#39;t
    </h3>
    <ul class="nhsuk-list nhsuk-list--cross" role="list">
      <li>
        <svg class="nhsuk-icon nhsuk-icon--cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"/>
        </svg>
        avoid bursting a blister yourself
      </li>
      <li>
        <svg class="nhsuk-icon nhsuk-icon--cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"/>
        </svg>
        certainly don&#39;t peel the skin off a burst blister
      </li>
      <li>
        <svg class="nhsuk-icon nhsuk-icon--cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"/>
        </svg>
        absolutely do not pick at the edges of the remaining skin
      </li>
      <li>
        <svg class="nhsuk-icon nhsuk-icon--cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" focusable="false" aria-hidden="true">
          <path d="M17 18.5c-.4 0-.8-.1-1.1-.4l-10-10c-.6-.6-.6-1.6 0-2.1.6-.6 1.5-.6 2.1 0l10 10c.6.6.6 1.5 0 2.1-.3.3-.6.4-1 .4z M7 18.5c-.4 0-.8-.1-1.1-.4-.6-.6-.6-1.5 0-2.1l10-10c.6-.6 1.5-.6 2.1 0 .6.6.6 1.5 0 2.1l-10 10c-.3.3-.6.4-1 .4z"/>
        </svg>
        please don&#39;t wear the shoes or use the equipment that caused your blister until it heals
      </li>
    </ul>
  </div>
</div>

Macro

{% from "do-dont-list/macro.njk" import list -%}

{{ list({
  title: "Don't",
  icon: "cross",
  hidePrefix: true,
  items: [
    {
      text: "avoid bursting a blister yourself"
    },
    {
      text: "certainly don't peel the skin off a burst blister"
    },
    {
      text: "absolutely do not pick at the edges of the remaining skin"
    },
    {
      text: "please don't wear the shoes or use the equipment that caused your blister until it heals"
    }
  ]
}) }}