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. They lose effectiveness if stacked upon each other and scattered throughout the page.
Length
- Keep callout text short and to the point.
- Under 350 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 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