Contextual alerts - Canada.ca design pattern

From: Treasury Board of Canada Secretariat

Alerts are notices for important new information that needs to appear on a page.

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, recent 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 a crisis, 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 or pills. Use these components instead:

How to implement

Alerts should be written for a grade 6 to 8 reading level.

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

You can use either the beta or stable version of this component.

Beta contextual alerts

The beta version is an improvement over the stable version. The code is still under review. It may still be subject to changes.

The beta version will eventually replace the stable version.

You will need to apply the provisional CSS to use this beta version.

Use the beta contextual alerts component

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
HTML
											<section class="provisional 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>
											
										
CSS
											.provisional.alert {
  background-clip: content-box;
  background-color: inherit;
  border-left: 6px solid #000;
  margin-bottom: 23px;
  margin-left: 10px;
  padding: 0 0 0 15px;
}
.provisional.alert > * {
  margin-left: 15px;
}
.provisional.alert-danger {
  border-color: #d3080c;
  border-image: linear-gradient(to bottom, #d3080c 16px, #d3080c 16px, transparent 16px, transparent 48px, #d3080c 48px, #d3080c 48px) 1 100%;
}
.provisional.alert-danger::before {
  color: #d3080c;
  content: "\e101";
}
.provisional.alert > p,
.provisional.alert > ul,
.provisional.alert > ol {
  margin-bottom: 0px;
}
.provisional.alert details {
  margin-left: 0.5em;
  padding-top: 15px;
}
.provisional.alert::before {
  font-family: "Glyphicons Halflings";
  font-size: 26px;
  line-height: 2.3em;
  margin-left: -1.27em;
  padding: 2px;
  position: absolute;
}
.provisional.alert > :first-child {
  margin-left: 15px;
}
.provisional.alert > :last-child {
  padding-bottom: 25px;
}
.provisional.alert-danger > :first-child::before {
  color: inherit;
  content: none;
}
.provisional.alert > :first-child:not(details) {
  margin-top: auto;
  padding-top: 15px;
}
											
										

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.

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.

Code
HTML
											<section class="provisional alert alert-warning">
  <h3>Changes to impaired driving and cannabis-related crime laws</h3>
  <p><a href="https://www.canada.ca/en/immigration-refugees-citizenship/news/notices/impaired-driving-cannabis-penalties-affect-immigration-status.html">New penalties for impaired driving and cannabis-related crimes may affect your immigration status in Canada</a>. If you commit one of these crimes, you may not be able to come to or stay in Canada.</p>
</section>
											
										
CSS
											.provisional.alert {
  background-clip: content-box;
  background-color: inherit;
  border-left: 6px solid #000;
  margin-bottom: 23px;
  margin-left: 10px;
  padding: 0 0 0 15px;
}
.provisional.alert > * {
  margin-left: 15px;
}
.provisional.alert-warning {
  border-color: #ee7100;
  border-image: linear-gradient(to bottom, #ee7100 16px, #ee7100 16px, transparent 16px, transparent 48px, #ee7100 48px, #ee7100 48px) 1 100%;
}
.provisional.alert-warning::before {
  color: #ee7100;
  content: "\e107";
}
.provisional.alert > p,
.provisional.alert > ul,
.provisional.alert > ol {
  margin-bottom: 0px;
}
.provisional.alert details {
  margin-left: 0.5em;
  padding-top: 15px;
}
.provisional.alert::before {
  font-family: "Glyphicons Halflings";
  font-size: 26px;
  line-height: 2.3em;
  margin-left: -1.27em;
  padding: 2px;
  position: absolute;
}
.provisional.alert > :first-child {
  margin-left: 15px;
}
.provisional.alert > :last-child {
  padding-bottom: 25px;
}
.provisional.alert-warning > :first-child::before {
  color: inherit;
  content: none;
}
.provisional.alert > :first-child:not(details) {
  margin-top: auto;
  padding-top: 15px;
}
											
										

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
HTML
											<section class="provisional 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>
											
										
CSS
											.provisional.alert {
  background-clip: content-box;
  background-color: inherit;
  border-left: 6px solid #000;
  margin-bottom: 23px;
  margin-left: 10px;
  padding: 0 0 0 15px;
}
.provisional.alert > * {
  margin-left: 15px;
}
.provisional.alert-info {
  border-color: #269abc;
  border-image: linear-gradient(to bottom, #269abc 16px, #269abc 16px, transparent 16px, transparent 48px, #269abc 48px, #269abc 48px) 1 100%;
}
.provisional.alert-info::before {
  color: #269abc;
  content: "\e086";
}
.provisional.alert > p,
.provisional.alert > ul,
.provisional.alert > ol {
  margin-bottom: 0px;
}
.provisional.alert details {
  margin-left: 0.5em;
  padding-top: 15px;
}
.provisional.alert::before {
  font-family: "Glyphicons Halflings";
  font-size: 26px;
  line-height: 2.3em;
  margin-left: -1.27em;
  padding: 2px;
  position: absolute;
}
.provisional.alert > :first-child {
  margin-left: 15px;
}
.provisional.alert > :last-child {
  padding-bottom: 25px;
}
.provisional.alert-info > :first-child::before {
  color: inherit;
  content: none;
}
.provisional.alert > :first-child:not(details) {
  margin-top: auto;
  padding-top: 15px;
}
											
										

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
HTML
											<section class="provisional 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>
											
										
CSS
											.provisional.alert {
  background-clip: content-box;
  background-color: inherit;
  border-left: 6px solid #000;
  margin-bottom: 23px;
  margin-left: 10px;
  padding: 0 0 0 15px;
}
.provisional.alert > * {
  margin-left: 15px;
}
.provisional.alert-success {
  border-color: #278400;
  border-image: linear-gradient(to bottom, #278400 16px, #278400 16px, transparent 16px, transparent 48px, #278400 48px, #278400 48px) 1 100%;
}
.provisional.alert-success::before {
  color: #278400;
  content: "\e084";
}
.provisional.alert > p,
.provisional.alert > ul,
.provisional.alert > ol {
  margin-bottom: 0px;
}
.provisional.alert details {
  margin-left: 0.5em;
  padding-top: 15px;
}
.provisional.alert::before {
  font-family: "Glyphicons Halflings";
  font-size: 26px;
  line-height: 2.3em;
  margin-left: -1.27em;
  padding: 2px;
  position: absolute;
}
.provisional.alert > :first-child {
  margin-left: 15px;
}
.provisional.alert > :last-child {
  padding-bottom: 25px;
}
.provisional.alert-success > :first-child::before {
  color: inherit;
  content: none;
}
.provisional.alert > :first-child:not(details) {
  margin-top: auto;
  padding-top: 15px;
}
											

Stable contextual alerts

The beta version will eventually replace this stable version.

Use the stable contextual alerts component

See the working example with code: WET: Alerts

Example

Contextual alerts pattern
Screenshot illustrating the contextual alert pattern on Canada.ca. Details on this graphic can be found in the surrounding text.

Discussion

Discuss the pattern in github issues

Date modified: