Overview

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

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.

Content guidelines

Use only 1-3 callouts per page. They lose effectiveness if stacked upon each other and scattered throughout the page.

Placement

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

Length

  • Keep callout text short and to the point.
  • Best practice – under 400 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-3 words
  • bold the title
  • be descriptive
  • use sentence case

Was this page helpful?

All fields are required unless otherwise indicated.

Your submissions are monitored by our web team and are used to help improve the experience on Alberta.ca.