Contextual alerts: Canada.ca design system

  • Last updated: 2020-12-18

Alerts are notices for important new information that needs to appear on a page.

Alert heading

Alert description

On this page

When to use

Use contextual alerts to:

  • bring a person’s attention to an important change at the page or subsection level like a service or site outage, recent changes to a process or service
  • provide the result of a user-action, for example, confirm success, or notify a person of an error
  • warn a person of a consequence of an action or inaction related to their task

To use contextual alerts during a crisis, follow these guidelines:

What to avoid

Do not use contextual alerts:

  • to provide information about a normal step in a process or task
  • to simply add emphasis to content
  • in cases where a warning is neither high risk nor frequently experienced
  • to create labels or pills. Use these components instead:

How to implement

Alerts should be written for a grade 6 to 8 reading level.

Place the alert in the appropriate context:

Applies to the entire site
Place it at the top of the page above the main heading
Applies to the page
Place it underneath the page heading
Applies to a subsection of the page
Place it within that subsection, generally underneath the subsection heading or between 2 paragraphs

Use the appropriate type of alert:

  1. Danger alert
  2. Warning alert
  3. Info alert
  4. Success alert

1. Danger alert

When to use: Use the danger alert to draw attention to a situation that could place someone in danger, such as a do not travel warning. You can also use it to alert a person of a technical issue that could cause them to be unable to complete their task, such as an invalid submission of data in a form.

If pregnant or considering pregnancy - Notice regarding both partners

Avoid travel to Costa Rica if you are pregnant or planning to conceive a child in the next 3 months.

Code
<section class="alert alert-danger">
  <h3>If pregnant or considering pregnancy - Notice regarding both partners</h3>
  <p>Avoid travel to Costa Rica if you are pregnant or planning to conceive a child in the next 3 months.</p>
</section>

2. Warning alert

When to use: Use the warning alert to draw attention to a possible consequence of an action or inaction, such as legal penalty that could apply.

Changes to impaired driving and cannabis-related crime laws

New penalties for impaired driving and cannabis-related crimes may affect your immigration status in Canada. If you commit one of these crimes, you may not be able to come to or stay in Canada.

New penalties and how you could be afected

Code
<section class="alert alert-warning">
 <h3>Changes to impaired driving and cannabis-related crime laws</h3>
 <p>New penalties for impaired driving and cannabis-related crimes may affect your immigration status in Canada. If you commit one of these crimes, you may not be able to come to or stay in Canada.</p>
 <p><a href="https://www.canada.ca/en/immigration-refugees-citizenship/news/notices/impaired-driving-cannabis-penalties-affect-immigration-status.html">New penalties and how you could be afected</a></p>
</section>

3. Info alert

When to use: Use the info alert to draw attention to a clarification of surrounding content or helpful advice, such as the number of weeks it will take to receive a refund when an application is sent by mail vs by phone.

Current status of the call for applications: Closed

Thank you for your interest in Canada Summer Jobs. Applications are now closed.

Code
<section class="alert alert-info">
  <h3>Current status of the call for applications: Closed</h3>
  <p>Thank you for your interest in Canada Summer Jobs. Applications are now closed.</p>
</section>

4. Success alert

When to use: Use success alert to draw attention to a successful action, such as to confirm a submission or the completion of a task.

Your request for publicly available data from the list of charities has been successful

The turnaround time to process your request may take up to four (4) weeks. We will contact you if we need more information.

Code
<section class="alert alert-success">
  <h3>Your request for publicly available data from the List of charities has been successful</h3>
  <p>The turnaround time to process your request may take up to four (4) weeks. We will contact you if we need more information.</p>
</section>

Research and blog posts

This style of alert was used successfully during a project to improve content on travel advisories:

Latest changes

Promoted the beta alert pattern to the stable alert pattern.

Discussion

Discuss the pattern in github issues

Date modified: