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.

Dependencies

The Callout component requires additional CSS dependencies to render correctly:

  • Alert Banner CSS: The Callout component extends the Alert Banner component and requires the Alert Banner CSS file to be loaded for proper styling. For use on external platforms, ensure that the following CSS is added separate from the GNWT Design System CSS Bundle: alert-banner.css

These dependencies are automatically resolved when using the Callout component through Drupal's component system, but should be considered when implementing the component in other contexts or when troubleshooting styling/interactivity issues.

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.

ALBE intakes: register for a placement assessment

Seats are limited each intake. Start by booking a placement assessment to find your level and plan your courses with an advisor.

Book an assessment
Open example in a new tab

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.

Evacuation order - Fort Providence

The community of Fort Providence has issued an evacuation order. All residents are required to evacuate the area immediately due to a wildfire in the area.

Evacuation details and updates
Open example in a new tab

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.

Severe storm warning - widespread power outages possible

A severe storm is expected tonight with high winds and heavy rain that may cause power outages and hazardous road conditions. Secure outdoor items, charge essential devices, and avoid travel if possible.

Open example in a new tab

Announcement

Use the announcement style for communicating without urgency, such as policy changes, service updates, and helpful information. 

Changes to driver's licence renewal process

Beginning June 1, eligible applicants can renew driver's licences online to reduce wait times at service centres. Check the eligibility criteria and follow the step‑by‑step renewal instructions.

Driver's licence renewal updates
Open example in a new tab

Information

Use the information style for communicating without urgency such as tips, ongoing service announcements, and helpful reminders. 

Scheduled maintenance — online services Sunday 2:00–4:00 AM

Routine website maintenance will occur Sunday between 2:00 and 4:00 AM; some online services may be temporarily unavailable. Most services will resume automatically once maintenance is complete.

Open example in a new tab

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 appropriate aria-level for callout titles.
  • aria-hidden="false" ensures callout content is announced to screen readers.
  • Proper semantic markup maintains document structure and navigation.
Updated: Jan 18, 2026