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="hs2-do-dont-list">
<h3 class="hs2-do-dont-list__label">Do</h3>
<ul class="hs2-list hs2-list--tick">
<li>
<svg class="hs2-icon hs2-icon__tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 -5 30 30" fill="none" aria-hidden="true" width="24" height="24">
<path d="M9.55002 18.075L3.40002 11.925L5.30002 10.025L9.55002 14.3L18.7 5.125L20.6 7.025L9.55002 18.075Z" fill="#007F3B" />
</svg>
example item one
</li>
<li>
<svg class="hs2-icon hs2-icon__tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 -5 30 30" fill="none" aria-hidden="true" width="24" height="24">
<path d="M9.55002 18.075L3.40002 11.925L5.30002 10.025L9.55002 14.3L18.7 5.125L20.6 7.025L9.55002 18.075Z" fill="#007F3B" />
</svg>
example item two
</li>
<li>
<svg class="hs2-icon hs2-icon__tick" xmlns="http://www.w3.org/2000/svg" viewBox="0 -5 30 30" fill="none" aria-hidden="true" width="24" height="24">
<path d="M9.55002 18.075L3.40002 11.925L5.30002 10.025L9.55002 14.3L18.7 5.125L20.6 7.025L9.55002 18.075Z" fill="#007F3B" />
</svg>
example item three
</li>
</ul>
</div>
<div class="hs2-do-dont-list">
<h3 class="hs2-do-dont-list__label">Don't</h3>
<ul class="hs2-list hs2-list--cross">
<li>
<svg class="hs2-icon hs2-icon__cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 -5 30 30" aria-hidden="true" width="24" height="24">
<path d="M6.40005 19.45L4.55005 17.6L10.15 12L4.55005 6.39999L6.40005 4.54999L12 10.15L17.6 4.54999L19.45 6.39999L13.85 12L19.45 17.6L17.6 19.45L12 13.85L6.40005 19.45Z" fill="#d5281b"></path>
</svg>
do not example item four
</li>
<li>
<svg class="hs2-icon hs2-icon__cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 -5 30 30" aria-hidden="true" width="24" height="24">
<path d="M6.40005 19.45L4.55005 17.6L10.15 12L4.55005 6.39999L6.40005 4.54999L12 10.15L17.6 4.54999L19.45 6.39999L13.85 12L19.45 17.6L17.6 19.45L12 13.85L6.40005 19.45Z" fill="#d5281b"></path>
</svg>
do not example item five
</li>
<li>
<svg class="hs2-icon hs2-icon__cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 -5 30 30" aria-hidden="true" width="24" height="24">
<path d="M6.40005 19.45L4.55005 17.6L10.15 12L4.55005 6.39999L6.40005 4.54999L12 10.15L17.6 4.54999L19.45 6.39999L13.85 12L19.45 17.6L17.6 19.45L12 13.85L6.40005 19.45Z" fill="#d5281b"></path>
</svg>
do not example item six
</li>
<li>
<svg class="hs2-icon hs2-icon__cross" xmlns="http://www.w3.org/2000/svg" viewBox="0 -5 30 30" aria-hidden="true" width="24" height="24">
<path d="M6.40005 19.45L4.55005 17.6L10.15 12L4.55005 6.39999L6.40005 4.54999L12 10.15L17.6 4.54999L19.45 6.39999L13.85 12L19.45 17.6L17.6 19.45L12 13.85L6.40005 19.45Z" fill="#d5281b"></path>
</svg>
do not example item seven
</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 |
|---|---|---|---|
| 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": "example item one"
},
{
"item": "example item two"
},
{
"item": "example item three"
}
]
}) }}
{{ list({
"title": "Don't",
"type": "cross",
"items": [
{
"item": "example item four"
},
{
"item": "example item five"
},
{
"item": "example item six"
},
{
"item": "example item seven"
}
]
}) }}When to use Do and Don't lists
Use a Do and Don't list to give users clear and simple advice.
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.
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.
