Notifications

Government mail service may be affected by the Canada Post labour disruption. See how to send and receive government mail during this time

Part of Components

Callouts

Colour coded text boxes used to alert people to events, important changes, urgent notices, and emergencies.

Overview

Callouts highlight important content within the body text of a page. Callouts should communicate one piece of crucial information.

Design

Information

Most common callout. Pulls information from body text that needs to stand out more.

Event

Highlights specific dates, such as a grant application closing date.

Urgent or Important

Less common, except when important content needs to stand out, such as Covid-19 information.

Emergency

Only for situations where there is a danger to the public.

Usage guidelines

Accessibility

Use text on a grey background within the callout.

Positioning

  • Green, yellow or red callouts: place at the top of page
  • Blue callouts: place within the text as need arises

Colour codes

Use the following Hex codes for each corresponding callout:

  • Blue: #004A8F
  • Yellow: #F9CE2D
  • Red: #DA291C
  • Green: #006F4C

Content guidelines

Use only 1 to 3 callouts per page. Too many callouts on a page, or stacking them, makes them less effective.

Length

  • Keep callout text short and to the point.
  • For green, yellow or red callouts, use up to 350 characters with spaces.
  • For blue information callouts, use up to 235 characters with spaces.

Formatting

Use only text within a callout:

  • avoid bullets inside callouts
  • do not use callouts inside accordions
  • do not include H2 headings, images, or graphics
  • avoid paragraph breaks

Titles

Titles and headings should not be used in a standard callout.

For all other callouts, titles are optional. They also count towards the character count within a callout. If using a title follow these best practices:

  • keep titles short, 1 to 3 words
  • bold the title
  • be descriptive
  • use sentence case