Language selection

Search


Contextual alerts: Canada.ca design system

  • Last updated: 2022-08-24

Alerts are short, prominent notices meant to draw attention to an important message or change. They are often time-sensitive. The label, colour, and icon indicate the type of message and its urgency.

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
  • draw attention to important recent or upcoming 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 urgent service disruptions, 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, use this component instead:

How to implement

Write alert text for a grade 6 to 8 reading level.

Keep alert text very brief. Provide further details in the appropriate section or page.

Remove alert text once the issue is resolved or enough time has passed that the information provided is no longer new.

Strictly limit the number of alerts on the page to avoid alert fatigue.

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
  • the date of an upcoming change to a policy or process that will affect a significant number of people, such as a change to travel requirements

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>

Starting April 1, 2022, pre-entry tests will no longer be required for fully vaccinated travellers entering Canada by land, air, or water. Until then, follow the pre-entry test requirements.

News release

Code
<section class="alert alert-warning">

<p><strong>Starting April 1, 2022,</strong> pre-entry tests will no longer be required for fully vaccinated travellers entering Canada by land, air, or water. Until then, follow the pre-entry test requirements.</p>
<p><a href="https://www.canada.ca/en/public-health/news/2022/03/government-of-canada-will-remove-pre-entry-test-requirement-for-fully-vaccinated-travellers-on-april-1.html">News release</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

Added an additional warning alert example that includes a date.

Added link to a blog post on alert fatigue.

Adjusted definition and implementation advice.
Promoted the beta alert pattern to the stable alert pattern.

Page details

Date modified: