Banner

Statuses

To create a Banner, create a div with the class cd-banner. Inside it, create another div with the class cd-banner-content. Place all child content inside the inner div.

Every Banner must have a status, which you can set by adding one of the following additional classes:

cd-status-info
cd-status-success
cd-status-warning
cd-status-error
cd-status-neutral

<div class="cd-banner cd-status-info">
  <div class="cd-banner-content">
    Welcome to the new and improved client portal!
    <span class="cd-link">See what's new</span>.
  </div>
</div>
<div class="cd-banner cd-status-success">
  <div class="cd-banner-content">
    You've successfully enrolled in beta tests. You can
    switch back to the stable version at any time by
    visiting your
    <span class="cd-link">user settings</span>.
  </div>
</div>
<div class="cd-banner cd-status-warning">
  <div class="cd-banner-content">
    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>
<div class="cd-banner cd-status-error">
  <div class="cd-banner-content">
    The application is currently down for maintenance. We'll
    be back online shortly.
  </div>
</div>
<div class="cd-banner cd-status-neutral">
  <div class="cd-banner-content">
    You're currently in the
    <strong>us-east-1</strong> region.
  </div>
</div>

Title

To add a title to the Banner, add the class cd-banner-title to its first child.

<div class="cd-banner cd-status-warning">
  <div class="cd-banner-content">
    <p class="cd-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>
</div>

Dismiss Button

If you want to make the Banner dismissible, add a button with the class cd-dismiss-button. 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="cd-banner cd-status-warning">
  <div class="cd-banner-content">
    Node.js 16 is nearing the end of support. Please update
    your scripts to use a newer version of Node.js.
    <button
      class="cd-dismiss-button"
      aria-label="Dismiss"
    ></button>
  </div>
</div>

Playground

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