Alert

The alert is for important, sometimes time-sensitive information. Reserve alerts for information the audience must read before anything else.

The alert is a band that extends across the width of the utility header .

It includes:

  • An optional icon, selected from a list of font icon options
  • A text field, which includes the ability to link to other pages
  • An “X” close icon that allows people to dismiss the alert
  • Your theme's standout color as the background color

Sample

Info

Warning

Danger

Resolution

Info


     

Warning

Danger


     

Resolution


     

Include alert banner module into your page directly after skip-to-content component:

 <header role="banner" id="header" class="global-header">
   <div id="skip-to-content">
       <a href="#main-content">Skip to Main Content</a>
     </div>
<!-- Alert Banner --> ❴% include "../modules/alert-banner.html" %❵ ... </header>

For Eleventy users

Add the alert key with the path to your alert html file alert: " ../modules/alert-banner.html" after your eleventy layout key declaration in the front matter data on your page.
---
title: Alert Banner
layout: page.njk
alert: "../modules/alert-banner.html"
---

Usage

When and how to use it

Use the alert sparingly. They alarm people and distract from other content.

Be concise with your alert content. Use a link to send people to a page with the details.

Only use one alert on a page. Make sure the alert is relevant to the page it is on. Only duplicate the alert on other pages if it applies to those pages.

Use alerts to tell people about:

  • Open application periods (informational)
  • Planned maintenance (informational)
  • Approaching deadlines (warning)
  • Services that are down (danger)
  • Positive feedback (success)

Choose an icon that supports the tone of your alert.

How not to use it

Do not put an alert on every page on your site. If people see alerts too often, they will start to ignore them and not read the content.

Do not put more than one alert on a page.

Do not use alerts to simply highlight important content. They are for information that is new, relevant, and temporary.

Accessibility

Standard accessibility review

Each time a new component version is published:

  • Test with the axe accessibility tool
  • Review with the VoiceOver or NVDA screen reader
  • Ensure all actionable elements are accessible by keyboard command and tab in a logical order
  • Check the component layout on a variety of screen sizes