Callout
Callouts highlight important information within page content without the urgency of alert banners. Use them to draw attention to key details, tips, warnings, or supplementary information that supports the main content. Unlike alert banners, callouts are integrated into the content flow and don't require immediate action.
Do
- Use callouts to emphasize key information that supports or enhances the main content.
- Choose appropriate callout levels based on the information type.
- Keep callout content concise and focused on a single key message or concept.
- Place callouts strategically within content where they provide the most value to users.
- Use consistent styling throughout your site to build user recognition.
- Include relevant links when callouts reference additional resources or actions.
- Test readability to ensure callouts enhance rather than interrupt content flow.
Don't
- Don't overuse callouts — too many will reduce their effectiveness and clutter the page.
- Don't use callouts for critical alerts — use alert banners for urgent information that requires immediate attention.
- Don't make callouts too lengthy — they should supplement, not replace, main content.
- Don't use inconsistent styling — maintain the same visual treatment across your site.
- Don't ignore mobile experience — ensure callouts remain readable and useful on smaller screens.
- Don't use callouts for primary navigation — they're for supplementary information, not main user paths.
- Don't rely solely on colour to convey the callout's importance or meaning.
- Don't place callouts randomly — position them where they logically relate to surrounding content.
Default
Use the none style is for general information that is not urgent and does not require action. Use it for announcements, community updates, and routine notices.
This style uses a subtle grey background to keep the message readable without drawing the same attention as warning or alert styles. It works well for content people should notice, but not interpret as time-sensitive.
Note: You can add a custom icon, but this option does not include one by default.
Alert
Use the alert style callout for the highest-priority, critical messages that require user attention and action. If the content of the callout is very urgent and affects most users, consider if using an alert banner to display globally instead.
Warning
Use the warning style for urgent, cautionary messages that are high-priority. Use for important cautions, temporary restrictions, or advisory information. If the content of the callout is very urgent and affects most users, consider if using an alert banner to display globally instead.
Announcement
Use the announcement style for communicating without urgency, such as policy changes, service updates, and helpful information.
Information
Use the information style for communicating without urgency such as tips, ongoing service announcements, and helpful reminders.
Accessibility Best Practices
Screen Reader Support
- Semantic structure: Callouts use proper heading elements and maintain document hierarchy within content flow.
- Clear content organization: Information is structured logically with headings, paragraphs, and lists as appropriate.
- Descriptive headings: Callout titles clearly communicate the purpose and importance of the information.
- Contextual placement: Callouts are positioned where they make sense within the content narrative.
Keyboard Navigation
- Accessible interactive elements: All links and dismiss buttons within callouts are keyboard accessible.
- Logical tab order: Interactive elements follow the natural reading flow within the callout.
- Focus management: Clear focus indicators help keyboard users navigate callout content.
- Dismiss functionality: When present, dismiss buttons are fully keyboard accessible.
Visual Accessibility
- Sufficient contrast: All callout styles meet WCAG contrast requirements for readability.
- Multiple visual cues: Importance is conveyed through icons, typography, and layout, not just color.
- Responsive design: Callouts adapt appropriately across different screen sizes and orientations.
- Clear visual hierarchy: Callout styling distinguishes it from main content while maintaining readability.
Content Guidelines
- Scannable content: Use clear headings, bullet points, and short paragraphs for easy reading.
- Plain language: Write callout content in simple, direct language that's easy to understand.
- Relevant information: Ensure callout content directly relates to and supports the surrounding page content.
- Actionable language: When including links, use descriptive text that explains the destination or action.
Implementation Considerations
- Content integration: Callouts should feel like a natural part of the content, not an interruption.
- Performance impact: Minimize the number of callouts per page to maintain good page performance.
- Responsive behavior: Ensure callouts work well across all device sizes and orientations.
- Testing requirements: Regularly test callouts with screen readers and keyboard navigation.
ARIA Attributes in Use
- Inherits accessibility features from the underlying alert-banner component.
role="heading"with appropriatearia-levelfor callout titles.aria-hidden="false"ensures callout content is announced to screen readers.- Proper semantic markup maintains document structure and navigation.