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.
<div class="nhsuk-do-dont-list">
<h3 class="nhsuk-do-dont-list__label">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" fill="none" aria-hidden="true" width="34" height="34">
<path stroke-width="4" stroke-linecap="round" d="M18.4 7.8l-8.5 8.4L5.6 12" stroke="#007f3b"></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" width="34" height="34">
<path stroke-width="4" stroke-linecap="round" d="M18.4 7.8l-8.5 8.4L5.6 12" stroke="#007f3b"></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" width="34" height="34">
<path stroke-width="4" stroke-linecap="round" d="M18.4 7.8l-8.5 8.4L5.6 12" stroke="#007f3b"></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'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" aria-hidden="true" width="34" height="34">
<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" fill="#d5281b"></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" fill="#d5281b"></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" width="34" height="34">
<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" fill="#d5281b"></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" fill="#d5281b"></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" width="34" height="34">
<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" fill="#d5281b"></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" fill="#d5281b"></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" width="34" height="34">
<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" fill="#d5281b"></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" fill="#d5281b"></path>
</svg>
do not wear the shoes or use the equipment that caused your blister until it heals
</li>
</ul>
</div>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.
| Name | Type | Required | Description |
|---|---|---|---|
| title | string | true | Title to be displayed on the do and don't list component. |
| type | string | true | Type of do and don't list component, "cross", "tick". |
| items | array | true | Array of do and don't items objects. |
| items[].item | string | true | Text to use within each do and don't item label. |
| hidePrefix | boolean | false | If set to true when type is "cross", then removes the default "do not" text prefix to each item. |
| headingLevel | integer | false | Optional heading level for the title heading. Default: 3 |
| classes | string | false | Classes to add to the do and don't list container. |
| attributes | object | false | HTML attributes (for example data attributes) to add to the do and don't list container. |
{% 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"
}
]
}) }}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.
Make sure any text below a Do or Don't list has its own heading so that screen reader users know it's not part of the Do or Don't section.
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.
Help us improve this guidance
Share insights or feedback and take part in the discussion. We use GitHub as a collaboration space. All the information on it is open to the public.
Read more about how to feedback or share insights.
If you have any questions, get in touch with the service manual team.
Updated: January 2024