Callout
Callouts are used to highlight important information that readers should not miss.
They help break up dense content and draw attention to messages such as:
- deadlines
- key updates
- eligibility criteria
- warnings
- reminders
- important context.
Callouts use a distinct background colour, border or icon to visually separate them from surrounding content. This visual treatment improves readability and helps emphasise urgency or importance without overwhelming the layout.
When to use
Use callouts to highlight important information that supports clarity, urgency or user action. They are effective when you want to:
- draw attention to time-sensitive instructions or reminders
- provide warnings or alerts within service updates
- highlight supporting information that is relevant but secondary to the main content
- emphasise tips, hints or best practices in newsletters or engagement campaigns
- improve readability by breaking up dense or lengthy content.
Callouts are especially useful in emails, service content and promotional material where layout and scannability matter.
Use them sparingly to avoid overwhelming users. Too many callouts can dilute their impact and reduce usability.
When not to use
Avoid using callouts for:
- primary campaign messages – use the Features or Hero banner component instead
- decorative purposes without meaningful content
- long-form or policy-heavy text – use a Letter layout or standard paragraph formatting.
Variations
The NSW Email Design System supports several Callout styles for different contexts:
Color theme
- Uses brand-aligned background colours (e.g. neutral, accent).
- Ideal for general emphasis without semantic meaning.
- Works well for highlights or additional information blocks.
- Uses semantic background colours (e.g. success, warning, error, info).
- Provides clear visual cues for status or urgency.
- Best for alerts, confirmations, or warnings inside service messages.
Size
- Supports small, medium, and large paddings.
- Allows the Callout to adapt to context: compact for inline notes, larger for emphasis in campaign layouts.
Icon
- Adds a leading icon to reinforce meaning (e.g. tick, warning, info).
- Improves scannability and helps readers quickly identify the type of message.
- Works well in reminders, success messages, or alerts.
Outline
- Uses a bordered style with no fill.
- Subtle, lightweight emphasis without heavy backgrounds.
- Suitable for formal messages where restraint is needed.
Surface
- Applies a soft background treatment with minimal styling.
- Best for inline notes or low-priority supporting information.
Left border
- Highlights the block with a solid coloured line on the left edge.
- Strong, accessible cue that works well for notes, quotes, or key highlights.
- Ideal for long emails where multiple callouts are stacked and need clear separation.
Design guidance
- Keep the message short and scannable — ideally one to three sentences.
- Choose the style that matches the tone and importance of the message.
- Use semantic colours (error, warning, success) for meaningful context only.
- Avoid stacking too many callouts in a single email — overuse reduces impact.
- Ensure text is legible in high contrast mode and with images disabled.
Design guidance
- Ensure contrast ratios meet accessibility standards.
- Pair icons with text labels — never rely on colour or iconography alone.
- Confirm semantic callouts (e.g. error, warning) still make sense if the colour is not visible.