alert overview

Use the alert component to convey key points that need highlighting to a user.

Key points

The container element has a class alert

The same element also has a modifier: alert-info, alert-success, alert-warning, alert-error, or alert-important

Accessibility

Consider adding role="alert" if appropriate. More info about alert role

If this is being used for a banner, then role="banner" might be more suitable (if you cannot use the header element instead)

Examples

To show an information alert, use the following markup.

            
<div class="alert alert-info" role="alert">
  <div class="flex flex-align-items__baseline">
    <i class="alert-icon fas fa-info-circle mt-1 mr-2" aria-hidden="true"></i>
    <div>
      <p>Content goes here.</p>

      <p>
        Content goes here. Div parent of this paragraph is of course optional
        if you just have one <code>p</code>, for example.
      </p>
    </div>
  </div>
</div>
              
          

This will produce the following:

Notes about the example:

• Use the flex utility class to have an icon on the side
• The margin on the icon will depend on the icon you are using
• The HTML for the icon may be quite different (e.g. font awesome icons often use SVG or i tags)

A warning alert uses the alert-warning class alongside alert

An important alert uses the alert-important class alongside alert

An error alert uses the alert-error class alongside alert

A success alert uses the alert-success class alongside alert

Headings

Use the alert-heading class inside the content.

Accessibility: consider using heading elements such as h2 through to h6 for appropriate HTML semantics, even though it will be styled the same size as the rest of the alert text.

Example:

            
          <div class="alert alert-info" role="alert">
  <div class="flex flex-align-items__baseline">
    <i class="alert-icon fas fa-info-circle mt-1 mr-2" aria-hidden="true"></i>
    <div>
      <h2 class="alert-heading">Alert heading</h2>

      <p>Content goes here. Content goes here. Content goes here.</p>
    </div>
  </div>
</div>
          
          

Ways to simplify the HTML further

If you don't need icons consider this example:

            
              <div class="alert alert-info" role="alert">
  <p>Multi element Content goes here.</p>

  <p>Multi element Content goes here.</p>
</div>
            
          

To produce this:

Or directly put the class on a p element if you just have a single sentence to write out:

                
<p class="alert alert-info" role="alert">
  <i class="alert-icon fas fa-info-circle mt-1 mr-2" aria-hidden="true"></i>
  A single paragraph of text directly has the <code>alert</code> classes added to it
</p>
                
              

              
<p class="alert alert-info" role="alert">
  A single paragraph of text directly has the <code>alert</code> classes added to it
</p>
              
            

Using alerts in a disclosure pattern

Key points

• Some alerts could be leading questions, which, when tapped, are expanded
• This disclosure pattern can be implemented in standards-based HTML5 using details and summary elements
• This gives you automatic keyboard and other other accessibility semantics
• To achieve the specific design elements we have a certain HTML structure needed for this:

            
              <details class="pl-3 pr-3 mb-3 alert alert-info" role="banner">
  <summary>
    <div class="flex flex-align-items__baseline flex-justify-content__space-between">
      <span class="flex">
        <i class="alert-icon fas fa-info-circle mt-1 mr-2" aria-hidden="true"></i>
        What if my letter does not automatically open?
      </span>
      <i class="alert-icon alert-icon-chevron fas fa-chevron-down mt-1" aria-hidden="true"></i>
    </div>
  </summary>

  <p class="mt-3">
    Your letter should open automatically after download, but if this doesn’t happen
    you can find and view your letter in your devices’ Downloads area
  </p>
</details>
            
          

To produce this:

You can use the other alert modified instead of alert-info.

In this next example, the above example is modified to use the alert-warning class. The role is changed to an alert.