Callout

When to use

• Use a callout when a single piece of information needs to stand out from the surrounding content
• Use a callout when you want a reader to pause and take note of something specific on the page

When not to use

• If you want to signpost users to another page or destination, use a card instead. A callout is for editorial emphasis, it draws attention to content on the current page, not to a link or action

Content guidance

• Keep body text short and focused. If the content runs longer than two or three sentences, it belongs in the main flow rather than a callout
• Do not use a callout to hold large amounts of text. The visual separation loses its effect when overloaded
• Eyebrow is optional. Only use it if it helps the reader understand the key message. If it does not add meaning, leave it out to reduce noise and keep focus on the heading and body

Accessibility

This component is designed with accessibility built in:

• Colour contrast meets 4.5:1 for all text within the callout against its background surface, in both light and dark mode

Resources

• Figma
• Storybook