Content presentation
-
Warning callout
Use a warning callout to help users identify and understand warning content on the page, even if they do not read the whole page.
<div class="nhsuk-warning-callout">
<h3 class="nhsuk-warning-callout__label">
<span role="text">
<span class="nhsuk-u-visually-hidden">Important: </span>
School, nursery or work
</span>
</h3>
<p>Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.</p>
</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 heading | Type string | Required true | Description Heading to be used on the warning callout. |
| Name headingLevel | Type integer | Required false | Description Optional heading level for the heading. Default: 3 |
| Name html | Type string | Required true | Description Content to be used within the warning callout. |
| Name classes | Type string | Required false | Description Classes to add to the warning callout. |
| Name attributes | Type object | Required false | Description HTML attributes (for example data attributes) to add to the warning callout. |
{% from 'warning-callout/macro.njk' import warningCallout %}
{{ warningCallout({
"heading": "School, nursery or work",
"HTML": "<p>Stay away from school, nursery or work until all the spots have crusted over. This is usually 5 days after the spots first appeared.</p>"
}) }}When to use a warning callout
Use this callout for information that:
- is time critical
- could have a significant effect on someone's health
- addresses a common or significant misconception or mistake
When not to use a warning callout
Do not use a warning callout
- in transactional pages – we haven't tested them there yet
- if you need to tell a user to contact their GP or get medical help – use the pattern to help users decide when and where to get care (care cards) instead
- if the information is not important enough for a warning callout – use inset text instead
How to use a warning callout
Try to give the callout a short, clearly worded heading. Headings help people scan the page for warnings and understand what's relevant to them.
Make the callout concise, specific and self-contained. For example, do not introduce a callout with the words "If this happens...". Explain the circumstances.
Do not break the flow with a callout. Think about whether you need it and the best place to put it.
Avoid having more than 2 callouts on a page. We want to reassure people, not to scare them.
If possible, put at least 1 short paragraph of text between 2 callouts or between an action link and a callout.
Accessibility
The heading and background contrast ratio is 11.92:1 and the content and background contrast ratio is 13.69:1. These go beyond AAA guidelines.
Headings
The callout should have a specific heading, for example "School, nursery or work", prefixed with the visually hidden text Important:. This will help users with screen readers understand that the information is important.
If the heading is simply the word "Important" or it includes the word "important", you do not need to use visually hidden text.
<div class="nhsuk-warning-callout">
<h3 class="nhsuk-warning-callout__label">
Important<span class="nhsuk-u-visually-hidden">:</span>
</h3>
<p>For safety, tell your doctor or pharmacist if you're taking any other medicines, including herbal medicines, vitamins or supplements.</p>
</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 heading | Type string | Required true | Description Heading to be used on the warning callout. |
| Name headingLevel | Type integer | Required false | Description Optional heading level for the heading. Default: 3 |
| Name html | Type string | Required true | Description Content to be used within the warning callout. |
| Name classes | Type string | Required false | Description Classes to add to the warning callout. |
| Name attributes | Type object | Required false | Description HTML attributes (for example data attributes) to add to the warning callout. |
{% from 'warning-callout/macro.njk' import warningCallout %}
{{ warningCallout({
"heading": "Important",
"HTML": "<p>For safety, tell your doctor or pharmacist if you're taking any other medicines, including herbal medicines, vitamins or supplements.</p>"
}) }}Research
In testing, users noticed the yellow callouts and understood them as a warning.
Our research shows that clearly worded callout headings:
- help users spot relevant information quickly
- help users who cannot distinguish callouts by their colour
- are better than icons, like exclamation marks, which may not be accessible and can be interpreted in different ways
We've tested warning callouts in pages with lots of content. We haven't yet tested them in forms or transactional content.
We haven't tested links in warning callouts. If you want to include a link, please test it and let us know.
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: November 2021