Content presentation - Do and Don't lists
Use Do and Don't lists to help users understand what they should and should not do.
<div class="block-do_list">
<div class="hse-do-dont-list">
<h3 class="hse-do-dont-list__label">Do</h3>
<ul class="hse-list hse-list--tick">
<li>
<svg class="hse-icon hse-icon__check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.428 4.605a2.15 2.15 0 0 1 0 2.92L10.21 19.394a1.876 1.876 0 0 1-2.76 0l-4.877-5.161a2.15 2.15 0 0 1 0-2.92 1.876 1.876 0 0 1 2.759 0l3.498 3.702 9.84-10.411a1.876 1.876 0 0 1 2.76 0Z" />
</svg>
cover blisters that are likely to burst with a soft plaster or dressing
</li>
<li>
<svg class="hse-icon hse-icon__check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.428 4.605a2.15 2.15 0 0 1 0 2.92L10.21 19.394a1.876 1.876 0 0 1-2.76 0l-4.877-5.161a2.15 2.15 0 0 1 0-2.92 1.876 1.876 0 0 1 2.759 0l3.498 3.702 9.84-10.411a1.876 1.876 0 0 1 2.76 0Z" />
</svg>
wash your hands before touching a burst blister
</li>
<li>
<svg class="hse-icon hse-icon__check" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.428 4.605a2.15 2.15 0 0 1 0 2.92L10.21 19.394a1.876 1.876 0 0 1-2.76 0l-4.877-5.161a2.15 2.15 0 0 1 0-2.92 1.876 1.876 0 0 1 2.759 0l3.498 3.702 9.84-10.411a1.876 1.876 0 0 1 2.76 0Z" />
</svg>
allow the fluid in a burst blister to drain before covering it with a plaster or dressing
</li>
</ul>
</div>
</div>
<div class="block-dont_list">
<div class="hse-do-dont-list">
<h3 class="hse-do-dont-list__label">Don't</h3>
<ul class="hse-list hse-list--cross">
<li>
<svg class="hse-icon hse-icon__cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.586 4.586a2 2 0 0 1 2.828 0L12 9.172l4.586-4.586a2 2 0 1 1 2.828 2.828L14.828 12l4.586 4.586a2 2 0 1 1-2.828 2.828L12 14.828l-4.586 4.586a2 2 0 1 1-2.828-2.828L9.172 12 4.586 7.414a2 2 0 0 1 0-2.828Z" />
</svg>
do not burst a blister yourself
</li>
<li>
<svg class="hse-icon hse-icon__cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.586 4.586a2 2 0 0 1 2.828 0L12 9.172l4.586-4.586a2 2 0 1 1 2.828 2.828L14.828 12l4.586 4.586a2 2 0 1 1-2.828 2.828L12 14.828l-4.586 4.586a2 2 0 1 1-2.828-2.828L9.172 12 4.586 7.414a2 2 0 0 1 0-2.828Z" />
</svg>
do not peel the skin off a burst blister
</li>
<li>
<svg class="hse-icon hse-icon__cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.586 4.586a2 2 0 0 1 2.828 0L12 9.172l4.586-4.586a2 2 0 1 1 2.828 2.828L14.828 12l4.586 4.586a2 2 0 1 1-2.828 2.828L12 14.828l-4.586 4.586a2 2 0 1 1-2.828-2.828L9.172 12 4.586 7.414a2 2 0 0 1 0-2.828Z" />
</svg>
do not pick at the edges of the remaining skin
</li>
<li>
<svg class="hse-icon hse-icon__cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.586 4.586a2 2 0 0 1 2.828 0L12 9.172l4.586-4.586a2 2 0 1 1 2.828 2.828L14.828 12l4.586 4.586a2 2 0 1 1-2.828 2.828L12 14.828l-4.586 4.586a2 2 0 1 1-2.828-2.828L9.172 12 4.586 7.414a2 2 0 0 1 0-2.828Z" />
</svg>
do not wear the shoes or use the equipment that caused your blister until it heals
</li>
</ul>
</div>
</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 |
|---|---|---|---|
| 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. |
{% 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
Do and Don't lists should 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.
It's OK to have:
- 1 Do and a Don’t list
- 1 Don't and a Do list
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. Do not put a full stop at the end of a sentence. With Dos, just write the action. With Don'ts, include "do not" at the beginning of each bullet point.
Try to:
- keep bullets to 1 line on desktop - that’s about 63 characters
- keep to 8 items per list - if you have more, see if you can combine some items into one
Research
The NHS has tested the Do and Don't lists in pages with lots of content. 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.
The Do and Don't lists stack on desktop and mobile, rather than sitting side by side on the page.
The NHS found that users read down the page, not across it. Also, when they tried the lists side by side, the number of characters in each line was too short, which made reading difficult.
Accessibility
We add ‘do not’ at the start of Don’t list items because people with a visual disability may not be able to see the ticks and crosses.
The tick and cross icons are marked as decorative images so that assistive technology ignores them.
People with a visual disability may rely on the words. With the Don't lists, the NHS 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 the NHS includes "do not" at the start of every bullet point.
We do not say "do" at the start of every line in a Do list. People found this unnecessary and annoying.
Updated: August 2023