A NSW Government website
Design System v3.2.4

Callout

Callouts are a snippet of information that draws attention to important content.

Figma React

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

Accessibility

All components are responsive and meet WCAG 2.1 AA accessibility guidelines.

The Digital Driver's License trial

Once we launch statewide, the Digital Drivers License will become legal for use across NSW