Content presentation - Warning callout

Use a warning callout to help users identify very important content on the page, even if they do not read the whole page.

Open this default warning callout example in new window
Copy default warning callout code 
<div class="hse-callout hse-callout--warning">
  <h3 class="hse-callout__label">
    <svg class="hse-icon hse-icon__notification-alert" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M10.8 16.8a1.2 1.2 0 1 1 2.4 0 1.2 1.2 0 0 1-2.4 0Zm0-9.6a1.2 1.2 0 0 1 2.4 0V13a1.2 1.2 0 0 1-2.4 0V7.2ZM12 0C5.364 0 0 5.4 0 12A12 12 0 1 0 12 0Zm0 21.6a9.6 9.6 0 1 1 0-19.2 9.6 9.6 0 0 1 0 19.2Z" fill="#212B32" />
    </svg>
    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>
Close default warning callout code
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.

Nunjucks arguments for default warning callout
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.
Copy default warning callout code 
{% from 'callout/macro.njk' import callout %}

{{ callout({
  "type": "warning",
  "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>"
}) }}
Close default warning callout code

When to use a warning callout

Use this callout for important information that:

  • someone needs to be aware of before doing anything else
  • 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 – for example, forms
  • 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

Try to give the callout a short, clearly worded heading, such as 'warning'. Headings help people scan the page for warnings and understand what's relevant to them.

Make the callout specific and self-contained. For example, do not introduce a callout with the words "If this happens...". Explain the circumstances.

Keep the warning callout concise. No more than 5 lines on mobile view (this is about 2.5 lines on desktop).

Use a maximum of 23 characters for the title.

Use a maximum of 165 characters in the body text. This is about 31 words.

Do not break the flow of content with a callout. Think about whether you need it and the best place to put it.

If possible, put at least 1 short paragraph of text between 2 callouts, or between an action link and a callout.

Finish sentences in components with a full stop, unless it’s a full sentence link.

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.

Open this default warning callout example in new window
Copy default warning callout code 
<div class="hse-callout hse-callout--warning">
  <h3 class="hse-callout__label">
    <svg class="hse-icon hse-icon__notification-alert" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true">
      <path d="M10.8 16.8a1.2 1.2 0 1 1 2.4 0 1.2 1.2 0 0 1-2.4 0Zm0-9.6a1.2 1.2 0 0 1 2.4 0V13a1.2 1.2 0 0 1-2.4 0V7.2ZM12 0C5.364 0 0 5.4 0 12A12 12 0 1 0 12 0Zm0 21.6a9.6 9.6 0 1 1 0-19.2 9.6 9.6 0 0 1 0 19.2Z" fill="#212B32" />
    </svg>
    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>
Close default warning callout code
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.

Nunjucks arguments for default warning callout
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.
Copy default warning callout code 
{% from 'callout/macro.njk' import callout %}

{{ callout({
  "type": "warning",
  "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>"
}) }}
Close default warning callout code

Research

In testing done by the NHS, users noticed the yellow callouts and understood them as a warning.

The 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

They tested warning callouts in pages with lots of content. They have not tested them in forms or transactional content yet.

They have not tested links in warning callouts. If you want to include a link, please test it and let the UX or content team know.

Updated: August 2023