Callout

Note, tip, warning, success and danger admonitions — icon plus a word, never colour alone.

Callout

Note

Use a note for neutral, informational context that supports the main content.

Tip

Tips offer a helpful shortcut or best-practice that is not strictly required.

Warning

Warnings flag something that could cause an accessibility regression if ignored.

Success

Success callouts confirm that a pattern meets the standard it is being checked against.

Danger

Danger callouts mark a serious barrier that blocks people from completing a task.

Using the callout accessibly

Reach for a callout to highlight static, supporting context that is present when the page loads — never to announce something that changes after load.

Do

  • Pair the colour with an icon and a word such as “Warning”, so meaning never rests on colour alone (1.4.1).
  • Use a callout for fixed, supporting context that is in the page from the start.
  • Keep the title and body text contrast strong in every theme, including high contrast.

Don't

  • Don't use a callout to announce dynamic changes — use role="status" or role="alert" for live updates instead.
  • Don't signal type with colour alone — a red box reads as ordinary text to many users.
  • Don't leave decorative callout icons exposed to assistive tech.

Build it right

  • Treat the callout as static content; it is not a live region.
  • Convey type with an icon and a word and colour together.
  • Give decorative icons aria-hidden="true" so they aren't read out.
  • Verify text contrast in light, dark and high-contrast themes.
  • Place the callout in reading order where its context belongs.

The source CSS for this component lives in assets/css/components/callout.css.