Content presentation - Do and Don't lists

Use Do and Don't lists to help users understand more easily what they should and shouldn't do.

Open this default do and dont lists example in new window
Copy default do and dont lists code
<div class="nhsuk-do-dont-list">
  <h3 class="nhsuk-do-dont-list__label">Do</h3>
  <ul class="nhsuk-list nhsuk-list--tick">
    <li>
      <svg class="nhsuk-icon nhsuk-icon__tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path stroke-width="4" stroke-linecap="round" d="M18.4 7.8l-8.5 8.4L5.6 12"></path>
      </svg>
      cover blisters that are likely to burst with a soft plaster or dressing
    </li>
    <li>
      <svg class="nhsuk-icon nhsuk-icon__tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" aria-hidden="true">
        <path stroke-width="4" stroke-linecap="round" d="M18.4 7.8l-8.5 8.4L5.6 12"></path>
      </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" fill="none" aria-hidden="true">
        <path stroke-width="4" stroke-linecap="round" d="M18.4 7.8l-8.5 8.4L5.6 12"></path>
      </svg>
      allow the fluid in a burst blister to drain before covering it with a plaster or dressing
    </li>
  </ul>
</div>

<div class="nhsuk-do-dont-list">
  <h3 class="nhsuk-do-dont-list__label">Don&#39;t</h3>
  <ul class="nhsuk-list nhsuk-list--cross">
    <li>
      <svg class="nhsuk-icon nhsuk-icon__cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" 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"></path>
        <path d="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"></path>
      </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" 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"></path>
        <path d="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"></path>
      </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" 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"></path>
        <path d="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"></path>
      </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" 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"></path>
        <path d="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"></path>
      </svg>
      do not wear the shoes or use the equipment that caused your blister until it heals
    </li>
  </ul>
</div>
Close default do and dont lists code
Nunjucks macro options

Use options to customise the appearance, content and behaviour of a component when using a macro, for example, changing the text.

Some options are required for the macro to work; these are marked as "Required" in the option description.

If you're using Nunjucks macros in production with "html" options, or ones ending with "html", you must sanitise the HTML to protect against cross-site scripting exploits.

Nunjucks arguments for default do and dont lists
Name Type Required Description
Name title Type string Required true Description Title to be displayed on the do and don't list component.
Name type Type string Required true Description Type of do and don't list component, "cross", "tick".
Name items Type array Required true Description Array of do and don't items objects.
Name items[].item Type string Required true Description Text to use within each do and don't item label.
Name hidePrefix Type boolean Required false Description If set to true when type is "cross", then removes the default "do not" text prefix to each item.
Name headingLevel Type integer Required false Description Optional heading level for the title heading. Default: 3
Name classes Type string Required false Description Classes to add to the do and don't list container.
Name attributes Type object Required false Description HTML attributes (for example data attributes) to add to the do and don't list container.
Copy default do and dont lists code
{% from 'do-dont-list/macro.njk' import list %}

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

{{ list({
  "title": "Don't",
  "type": "cross",
  "items": [
    {
      "item": "burst a blister yourself"
    },
    {
      "item": "peel the skin off a burst blister"
    },
    {
      "item": "pick at the edges of the remaining skin"
    },
    {
      "item": "wear the shoes or use the equipment that caused your blister until it heals"
    }
  ]
}) }}
Close default do and dont lists code

When to use Do and Don't lists

Use a Do and Don't list to give users clear and simple advice, for example about treating a problem themselves.

When not to use Do and Don't lists

If you only have 1 Do - or 1 Don't, consider using inset text or a warning callout instead.

How to use Do and Don't lists

Keep your points as brief as possible.

Dos normally come before Don'ts.

It is alright to just have Don'ts if there aren't any Dos and just Dos if there aren't any Don'ts.

Treat the heading as a lead-in and the items under the heading as part of 1 long sentence. Start each bullet point lower case. With Dos, just write the action. With Don'ts, include "do not" at the beginning of each bullet point.

Research

Users recognised and understood the meaning of the ticks and crosses. They saw the green ticks as a positive "do" action and the red as a warning.

We've tested the Do and Don't lists in pages with lots of content. We aren't using them in forms or transactional content and haven't tested them there.

The Do and Don't lists stack on desktop and mobile, rather than sitting side by side on the page. We found that users read down the page, not across it. Also, when we tried the lists side by side, the number of characters in each line was too short which made reading difficult.

Accessibility

People with a visual disability may not be able to see the ticks and crosses. We use aria labels to hide them from screen reader users, so we don't confuse them.

People with a visual disability may rely on the words. With the Don't lists, we found that screen reader users need "do not" repeated at the beginning of every line. If we leave out "do not", there is a risk they will hear the command as a positive one, which could be dangerous. This could also apply to other user groups, like people with a learning disability or people who are very stressed. Users could also scroll down and miss the "Don't" heading. So we include "do not" at the start of every bullet point.

We don't say "do" at the start of every line in a Do list. People found this unnecessary and annoying.

Have you tested this component?

If so, please share your research findings and let us know how it has worked for you. This will help us improve it for everyone.

Before you start, you will need a GitHub account. It's an open forum where we collect feedback.

If you have any questions, you can message us on Slack. You will need a Slack account if you do not have one. Or you can contact us by email.

Updated: January 2019