Callouts
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 Toolkit supports several Callout styles for different contexts:
Brand colours
Brand-aligned callouts for emphasis when the message is important but not semantic.
Semantic alerts
Status-driven callouts for warnings, confirmations and urgent service information.
Size scale
Small, medium and large spacing options for compact notes or stronger emphasis.
With icon
Adds an icon to reinforce meaning and help readers scan the message faster.
Outlined
A lighter bordered callout for formal content that needs emphasis without a fill.
Surface
Soft background treatment for low-priority notes and supporting information.
Left border
Strong left-rule treatment that separates key notes clearly in longer emails.
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 (such as error, warning, success) for meaningful context only.
- Ensure contrast ratios meet accessibility standards.
- Pair icons with text labels. Never rely on colour or iconography alone.
- Confirm semantic callouts (such as error, warning) still make sense if the colour is not visible.
- Ensure text is legible in high contrast mode and with images disabled.
- Avoid stacking too many callouts in a single email – overuse reduces impact.