Language selection

Search alerts and service disruptions: 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:

  1. a change to the content of the page on which the alert appears: in this case, place the alert next to the updated content
  2. 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:

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:

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

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:

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

How this helps

Latest changes

Revised headings to say “service disruption” rather than “crisis”.

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


Page details

Date modified: