Callouts highlight important content within the body text of a page. Callouts should communicate one piece of crucial information.
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
Use the following Hex codes for each corresponding callout:
- Blue: #004A8F
- Yellow: #F9CE2D
- Red: #DA291C
- Green: #006F4C
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
Was this page helpful?
Your submissions are monitored by our web team and are used to help improve the experience on Alberta.ca.