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