Alerts

The alert pattern is used to convey important information to users with two different levels of importance.

Alert box

This should be used to announce information that takes precedence over all other page content. The inclusion of role="alert" will assist screen readers in announcing this content ahead of other information, so it should be used with caution.

Rules for alert boxes

• There should only be one alert box on a page at a time.
• Must not appear before the header, category header, main navigation, breadcrumbs or hero banner patterns.
• Wrap text with a div with a class of alert plus one of the four option classes:
  • alert--success
  • alert--info
  • alert--warning
  • alert--danger
• Use the different option classes to convey different types of message.
• Must have a heading introducing the type of message.

Callout

This should be used to promote inline content that is of greater importance than the surrounding content. This can be used as a visually more prominent option over using bold text, but where the information is not sufficiently important to use an alert box.

Rules for callouts

• Using too many callouts on a page will lower the visual impact of each and reduce their effectiveness.
• Must not appear before the header, category header, main navigation, breadcrumbs or hero banner patterns.
• Wrap text with a div with a class of callout plus one of the four option classes:
  • callout--success
  • callout--info
  • callout--warning
  • callout--danger
• Use the different option classes to convey different types of message.
• Must have a heading introducing the type of message.

Options available

• Alert (Success)
• Alert (Info)
• Alert (Warning)
• Alert (Danger)
• Callout (Success)
• Callout (Info)
• Callout (Warning)
• Callout (Danger)

Alert (Success)

Use the class alert--success for a success alert box. This alert box indicates a successful or positive action, such as successfully submitting a form.

Alert (Info)

Use the class alert--info for an info alert box. This alert box indicates neutral information or a neutral action, such as a recommendation or an update.

Alert (Warning)

Use the class alert--warning for a warning alert box. This alert box indicates a warning that might need attention or carries a time limit, such as impending application deadlines.

Alert (Danger)

Use the class alert--danger for a danger alert box. This alert box indicates a dangerous or potentially negative action such as closures or expired deadlines.

Callout (Success)

Use the class callout--success for a success callout box. This callout box indicates a successful or positive action, such as successfully submitting a form.

Callout (Info)

Use the class callout--info for an info callout box. This callout box indicates neutral information or a neutral action, such as a recommendation or an update.

Callout (Warning)

Use the class callout--warning for a warning callout box. This callout box indicates a warning that might need attention or carries a time limit, such as impending application deadlines.

Callout (Danger)

Use the class callout--danger for a danger callout box. This callout box indicates a dangerous or potentially negative action such as closures or expired deadlines.