Part of Components


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


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



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


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.


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

Usage guidelines


Use text on a grey background within the callout.


  • 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. They lose effectiveness if stacked upon each other and scattered throughout the page.


  • Keep callout text short and to the point.
  • Under 350 characters with spaces.


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 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