Skip to main content

Warning callout

Use a warning callout to help users identify and understand warning content on the page, even if they do noticedt read the whole page.

Open in new window
Copy
<div class="nhsuk-warning-callout">
  <h3 class="nhsuk-warning-callout__label">School, nursery or work</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>
Copy
{% 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

Don't 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 a care card instead
  • if the information is not important enough for a warning callout - use inset text instead

How to use a warning callout

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, don't introduce a callout with the words "If this happens...". Explain the circumstances.

Don't break the flow with a callout. Think about whether you need it and the best place to put it.

Don't overdo callouts. Avoid having more than 2 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.

We recommend adding an aria label, for example: aria-label="Important". This will help users with screen readers understand that the information is important. We still need to test this with users with access needs.

If you can help with this, please get in touch on the NHS.UK service manual Slack workspace or email us at service-manual@nhs.net.

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.

Discuss

Discuss warning callouts on GitHub

Get in touch

If you have a question:

Updated: January 2019