Contextual alerts: Canada.ca design

On this page

• When to use
• What to avoid
• How to implement
• Research and blog posts
• Latest changes

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:

• Canada.ca alerts and service disruptions

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:
  • label pattern

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.

<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

<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>

<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.

<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.

<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>

2022-05-10

Added an additional warning alert example that includes a date.

Added link to a blog post on alert fatigue.

Adjusted definition and implementation advice.

2022-08-24

Promoted the beta alert pattern to the stable alert pattern.