Skip to content
ShannonTucker edited this page Feb 15, 2022 · 7 revisions

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

Overview

Browser Alerts Mobile Alerts

Usage

Check out the Contextual alerts pattern from the Canada.ca Design System to determine when to use each alert style.

Customizing alerts

  • Alert content can be customized to meet your needs.
  • Alert colours cannot be changed. Please use the colour that is built into the component.

How we created this component- 4A Assessment

We imported the 4 alert components from the Core GC Design Library into the Extended GC Design Library - DECD, then altered them by adding 3px borders around them to help them stand out from other content on a page. We also increased the Heading style from H5 to H3, to be consistent with Canada.ca and for better visual hierarchy. Lastly, we augmented the alerts by creating mobile versions for all 4 components.