Callouts

Overview

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

Content guidelines

Callouts are most effective when they use concise, direct and easy-to-remember language – less is usually more.

• Use callouts to highlight the most important or critical pieces of information.
• Use only 1 to 3 callouts per page. Including too many callouts on a page makes them less effective.
• Avoid stacking callouts. Multiple callouts too close together reduces their importance and effectiveness.

Information callouts

Usage guidelines 

Use to highlight helpful or contextual information within page content.

Positioning

Place within the body of the text as needed.

Length

Use up to 235 characters, including spaces.

Formatting

• Text only.
• Do not include a title or icon.
• Do not include headings, images or graphics.
• Keep content within a single concise paragraph.
• May be used inside accordions, but only if the information applies exclusively to the content within that accordion.
• If a link is required, position it within the text as a hyperlink. Do not use paragraph breaks to include links.

Headings and titles

• Do not use headings or titles inside information callouts.
• If a heading is required, place it outside the callout as an H2 or H3.

Advisory alert callouts

Level 1

Level 2

Level 3

Level 4

Level 5

Usage guidelines

Used to communicate resolved situations, serious risks or emergency conditions that affect Albertans.

• Level 1 (blue): This is the lowest level of advisory information, typically used to note that the current situation poses no threat of danger to the public. If the callout content is not related to emergency situations, use the standard information callout instead.
• Level 2 (green): Used when an urgent or dangerous situation has ended and the public is safe to resume normal activities. Do not use this level for standard information.
• Level 3 (yellow): Used when issuing a warning about an urgent situation or when highlighting a potential risk to Albertans.
• Level 4 (orange): Used when an emergency situation has begun to present danger to Albertans and restrictions have been put in place to protect public safety.
• Level 5 (red): Used when there is a high risk of harm or danger to the public. Emergencies will typically include a ban or other public directions to protect the safety of Albertans.

Positioning

Advisory callouts must be placed at the top of page.

Length

• Keep callout text short and to the point.
• Text may be up to 350 characters including spaces.

Formatting

Use only text within a callout. All advisory-level callouts include a title field and an icon by default.

• Avoid using all advisory-level callouts inside accordions.
• Do not include headings, images or graphics.
• Keep messaging clear and succinct. Avoid paragraph breaks.
• If a link is needed, place it as a hyperlink in-line with the text.

Headings and titles

Headings should not be used in emergency-level callouts. If a heading is required, place it outside of the callout as an H2.

Each emergency-level callout should include a title. Titles should be short – 1 to 3 words – and be descriptive of the situation.

Accessibility

Callout colours and design align with globally recognized statuses as laid out by the American National Standards Institute (ANSI) as well as other government emergency communications.