Callout

Usage

Callouts are text excerpts, used as a visual cue to draw attention to content.

Use callouts to:

• call attention to important pieces of information
• supplement a point in the main text
• supply information that applies in special cases
• link to a relevant resource

When to avoid

Callouts should be used sparingly to maintain effectiveness, consider weaving the information into the introduction or as part of the instructions you're creating.

Do not:

• add multiple callout boxes to a topic. This dilutes the importance of the callout and distracts the user.
• create a callout with content that is not relevant to the user as your reader might then ignore future callouts.

How this component works

Callouts can contain an icon, a title and a message. Callouts should be short, easy to scan, informative and clear.

Callouts with pictograms

Place an SVG or image inside nsw-callout__pictogram. The pictogram container provides consistent sizing and spacing, so the pictogram can be changed without adding page- or template-specific styles.

Pictograms in callouts visually reinforce the message and are hidden from assistive technologies to avoid repeating the text. Do not rely on the pictogram alone to communicate meaning. When using an inline SVG, use the --nsw-pictogram-primary and --nsw-pictogram-secondary custom properties so it responds to themes and inverted sections. See the Pictograms style page for more information.

Accessibility

All components are responsive and designed to comply with WCAG 2.2 AA accessibility standards. Full compliance depends on using and configuring the components correctly.