Banner

Statuses

To create a banner, create a div with the class banner. Every banner must have a status, which you can set by adding one of the following additional classes:

info
success
warning
error

<div class="banner info">
  Welcome to the new and improved client portal!
  <span class="link">See what's new</span>.
</div>
<div class="banner success">
  You've successfully enrolled in beta tests. You can switch
  back to the stable version at any time by visiting your
  <span class="link">user settings</span>.
</div>
<div class="banner warning">
  We're aware of intermittent internet connectivity issues.
  As we work on a fix, try re-running any jobs that failed
  due to a network-related error.
</div>
<div class="banner error">
  The application is currently down for maintenance. We'll
  be back online shortly.
</div>

Title

To add a title to the banner, add the class banner-title to the first child of the banner.

<div class="banner warning">
  <p class="banner-title">Maintenance Reminder</p>
  The application will be unavailable tonight starting at
  8:00 PM. The outage is expected to take 15 minutes or
  less.
</div>

Dismiss Button

If you want to make the banner dismissible, add a button with the classes button and dismiss. Make sure to add an aria-label attribute to the button to describe its purpose, and a click event handler to handle hiding the banner.

<div class="banner warning">
  Node.js 16 is nearing the end of support. Please update
  your scripts to use a newer version of Node.js.
  <button
    class="button dismiss"
    aria-label="Dismiss"
  ></button>
</div>

Playground

Click the button below to test out adding a banner to this page.