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.
On this page
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
<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>
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
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
Revised headings to say “service disruption” rather than “crisis”.
Added a recommendation to include dates in the alert and use the correct verb tense.
- Date modified: