Canada.ca alerts and service disruptions: Canada.ca design system

Last updated: 2022-05-10

These recommendations will help bring consistency to each department's communications on service disruptions during a crisis.

How to use alerts for service disruptions

Alerts are meant to draw attention to changes in regular content in 2 ways:

a change to the content of the page on which the alert appears: in this case, place the alert next to the updated content
a change that has been made elsewhere, such as new information being published: in this case, link to the new information from within the alert

What to include in alerts

Alert content should:

be short and simple
describe the impact on the user
be tailored to the page on which it appears
include the dates (if known) when the disruption will take place
use the appropriate verb tense to reflect when the change is taking place
use links sparingly - if a link is needed, only include one

Limit use of alerts

Be aware that alert fatigue reduces the effectiveness of the alert over time. The more people see alerts and warning messages the less receptive they are to them. To avoid this, follow these guidelines:

only use alerts on a temporary basis (for the time it takes to integrate the information or resolve the situation)
limit the number of alerts on each page
limit the number of alerts used across pages:
- use at impacted points of service or information delivery, such as service initiation pages, contact pages, etc.
- avoid beyond service or information delivery points - on theme and topic pages, consider using a new doormat instead
save alerts for significant situations that impact most users:
- on the Canada.ca home page, only use when more than 50% of the population is affected
- on institutional landing pages, only use when more than 40% of users are impacted
avoid using alerts just for styling regular content (for emphasis or highlighting)

Which alert to use

Danger alert (red): Use only if the service is cancelled or if there's a risk to health or safety to Canadians in completing an activity.
Warning alert (yellow): Use for delays, closures at certain locations, and other types of service disruptions.
Info alert (blue): Use for the length of time an application method takes, changes in wait times on a phone line, messages that there is no service disruption for a particular service if that is generating inquiries.
Success alert (green): Use when a service disruption is resolved.

Examples and code

Limited service availability

This service is affected by the outbreak of coronavirus (COVID-19).

Check service status updates

HTML to code an alert

Code:

<section class="alert alert-warning">
	<h3>Limited service availability</h3>
	<p>This service is affected by the outbreak of coronavirus (COVID-19).</p>
	<a href="#">Check service status updates</a></p>
</section>

Change the "alert-warning" class to "alert-info", "alert-danger" or "alert-success" based on the type of alert needed.

Use the Contextual alerts pattern

Additional examples

Alert examples on specific page types:

Alerts that repeat across several pages

If you need to add the same alert on many different pages, it may make sense to make a single page that all these alerts can link to.

The central page will:

summarize the change in plain language
explain the impact on the users of affected services
be updated as soon as new information arises

The breadcrumb for this central page should lead to the Government of Canada's main response page for the crisis.

How this helps

prevents scattered crisis and service disruption pages
encourages a coordinated approach within each department and across the Government of Canada
reduces the work required to maintain various alerts and related updates

Latest changes

2022-05-10: Revised headings to say “service disruption” rather than “crisis”.

Added a recommendation to include dates in the alert and use the correct verb tense.

</div>

Page details

Date modified:: 2020-07-13

Language selection

Search