Our npm namespace has changed. Developers should update their projects to continue accessing our components.

Critical alerts

Use a critical alert banner to bring a user’s attention to a significant situation, such as a site-wide service disruption or other critical information that will impact most users.

  • Content:
    @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/global.variables' as globalVariables;
    @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/spacing.variables' as spacing;
    @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/colours.variables' as colours;
    @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/typography.variables' as typography;
    @use '@ongov/ontario-design-system-global-styles/dist/styles/scss/1-variables/font-weights.variables' as fontWeights;
    
    .ontario-critical-alert {
    	background-color: colours.$ontario-colour-warning;
    	font-weight: fontWeights.$ontario-font-weights-normal;
    	margin: spacing.$spacing-0;
    	padding: spacing.$spacing-4 spacing.$spacing-0;
    	position: relative;
    	z-index: 5;
    }
    
    .ontario-critical-alert__body {
    	display: -webkit-box;
    	display: -ms-flexbox;
    	display: flex;
    	-ms-flex-wrap: nowrap;
    	flex-wrap: nowrap;
    }
    
    .ontario-critical-alert__icon svg {
    	width: 28px;
    	height: 28px;
    	margin: spacing.$spacing-0 0.85rem spacing.$spacing-0 spacing.$spacing-0;
    }
    
    .ontario-critical-alert p {
    	margin: spacing.$spacing-0;
    	padding: spacing.$spacing-0;
    	line-height: 1.8;
    }
    
    .ontario-critical-alert a {
    	color: colours.$ontario-colour-black;
    	font-weight: fontWeights.$ontario-font-weights-bold;
    
    	&:hover,
    	&:focus {
    		text-decoration: none;
    	}
    
    	&:visited {
    		color: colours.$ontario-colour-black;
    	}
    }
    
  • URL: /components/raw/critical-alerts/critical-alerts.scss
  • Filesystem Path: fractal/components/components/alerts-highlights/critical-alerts/critical-alerts.scss
  • Size: 1.4 KB
  • Content:
    .ontario-critical-alert{background-color:#ffd440;font-weight:400;margin:0;padding:1rem 0;position:relative;z-index:5}.ontario-critical-alert__body{display:flex;flex-wrap:nowrap}.ontario-critical-alert__icon svg{width:28px;height:28px;margin:0 .85rem 0 0}.ontario-critical-alert p{margin:0;padding:0;line-height:1.8}.ontario-critical-alert a{color:#1a1a1a;font-weight:700}.ontario-critical-alert a:hover,.ontario-critical-alert a:focus{text-decoration:none}.ontario-critical-alert a:visited{color:#1a1a1a}
  • URL: /components/raw/critical-alerts/critical-alerts.css
  • Filesystem Path: fractal/components/components/alerts-highlights/critical-alerts/critical-alerts.css
  • Size: 504 Bytes

When to use this component

Critical alert banners typically appear above the global header bar and apply to the entire site or section. Consider using them only at impacted points of service or information delivery, such as service initiation pages or contact pages. Use them sparingly beyond service or information delivery points to avoid alert fatigue.

Be mindful of the amount of content in a critical alert banner. Since they appear at the top of the page, they can significantly impact the visibility of other content, especially on smaller mobile screens. Use a link or call to action to direct users to further information if needed.


Best practices

Do:

  • write concise headings and copy totalling a max of 140 characters
  • consider how tall the critical alert banner will appear on mobile screens
  • post them temporarily and only keep them up for the duration of the crisis
  • describe the impact on the user

Don’t:

  • stack critical alert banners
  • use critical alert banners just for styling regular content (for emphasis or highlighting)
  • use more than one link

If you have any questions or feedback, please get in touch.