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

• Example
• Source code
• Implementation notes

Example

Info

New! A new version of the State Web Template has launched. Upgrade now

Warning

Warning: Our website may be impacted during upgrade. Learn more about the impact

Danger

Alert: Our systems are currently down. Learn more about the incident

Resolution

Fixed. Our systems are back up again. Learn more about the resolution

Source code

Info

  

   
   New! A new version of the State Web Template has
    launched. 
    Upgrade now
   
  
 
     

Warning

 
 Warning: Our website may be impacted during upgrade.
  
  Learn more about the impact
 

Danger

  

   
   Alert: Our systems are currently down. 
    Learn more about the incident
   
  
 
     

Resolution

  

   
   Fixed. Our systems are back up again. 
    Learn more about the resolution
   
  
 
     

Implementation notes

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