alert overview

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

Key points

  • The container element has the class alert
  • The same element also has a modifier: alert-info, alert-success, alert-warning, alert-error, or alert-important
  • Alerts can be placed inside a card or directly on the page background — see the variants section below

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)

Props

Class Description
alert Required base class — apply to the container element alongside a modifier
alert-info Informational — blue tint, info icon
alert-warning Warning — yellow tint, exclamation icon
alert-important Important — orange tint, exclamation icon
alert-error Error — red tint, exclamation icon
alert-success Success — green tint, check icon
drdr-alert-success High-contrast success banner — dark green background with white text, for prominent confirmation screens
alert-heading Apply to a heading element inside the alert to style it at alert text size

Markup

Use the following pattern. The flex utility aligns the icon alongside the content.

            
<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>

Notes:

  • 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)

All variants

Alerts can appear inside a card or directly on the page background. The variants below are shown on the page background.

An information alert uses the alert-info class alongside alert

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

A high-contrast success banner uses drdr-alert-success alongside alert — dark green background with white text. Use this for prominent confirmation screens (e.g. booking confirmed).

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. 

            
<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:

Example of single line with icon 
              
<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>

To produce this:

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

To produce this:

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 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 modifiers 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.