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.

Open this custom heading warning callout example in new window
Copy custom heading warning callout code 
<div class="hs2-warning-callout">
  <h3 class="hs2-warning-callout__label">
    <span role="text">
      <span class="hs2-u-visually-hidden">Important: </span>
      Warning heading
    </span>
  </h3>
  <p>Put warning information content in this section</p>
</div>
Close custom heading 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 custom heading 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 custom heading warning callout code 
{% from 'warning-callout/macro.njk' import warningCallout %}

{{ warningCallout({
  "heading": "Warning heading",
  "HTML": "<p>Put warning information content in this section</p>"
}) }}
Close custom heading warning callout code

When to use a warning callout

Use this callout for information that:

  • is time critical
  • addresses a common or significant misconception or mistake

When not to use a warning callout

Do not use a warning callout

  • 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.

Open this default warning callout example in new window
Copy default warning callout code 
<div class="hs2-warning-callout">
  <h3 class="hs2-warning-callout__label">
    Important<span class="hs2-u-visually-hidden">:</span>
  </h3>
  <p>Put important warning information content in this section.</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 'warning-callout/macro.njk' import warningCallout %}

{{ warningCallout({
  "heading": "Important",
  "HTML": "<p>Put important warning information content in this section.</p>"
}) }}
Close default warning callout code