Banners

When considering the use of a banner, it's best to evaluate the level of the message first. Content within banners must be important or require action taken by the customer.

Types

<div class="banner">
  <div class="wrapper__banner-icon">
    <svg class="banner__icon" role="presentation">
      <use xlink:href="#icon-info"></use>
    </svg>
  </div>
  <div class="wrapper__banner-content">
    <p class="banner__text">Information: This banner is used to provide general information.</p>
  </div>
</div>

<div class="banner banner--warning">
  <div class="wrapper__banner-icon">
    <svg class="banner__icon" role="presentation">
      <use xlink:href="#icon-warning"></use>
    </svg>
  </div>
  <div class="wrapper__banner-content">
    <p class="banner__text">Warning: This banner is used to communicate an impending, non-blocking issue.</p>
  </div>
</div>

<div class="banner banner--error">
  <div class="wrapper__banner-icon">
    <svg class="banner__icon" role="presentation">
      <use xlink:href="#icon-error"></use>
    </svg>
  </div>
  <div class="wrapper__banner-content">
      <p class="banner__text">Error: This banner is used to communicate a blocking change that needs to be remedied before a user can proceed.</p>
  </div>
</div>

<div class="banner banner--success">
  <div class="wrapper__banner-icon">
    <svg class="banner__icon" role="presentation">
      <use xlink:href="#icon-checkmark"></use>
    </svg>
  </div>
  <div class="wrapper__banner-content">
    <p class="banner__text">Success: This banner is used to communicate a positive or confirming action.</p>
  </div>
</div>

Description

Banners communicate varying levels of content such as information, warnings, errors, and success.

Multi-line Banner

<div class="banner banner--information">
  <div class="wrapper__banner-icon">
    <svg class="banner__icon" role="presentation">
      <use xlink:href="#icon-info"></use>
    </svg>
  </div>
  <div class="wrapper__banner-content">
    <h2 class="subheadline mb-1x">Olivander's Wand Shop</h2>
    <p class="banner__text">1 Holly and Phoenix feather wand. <a class="banner__link" href="#">Buy it now.</a></p>
    <p class="banner__text">1 Yew and Phoenix feather wand. <a class="banner__link" href="#">Buy it now.</a></p>
  </div>
</div>

Offline Banner

<input id="bannerOffline" class="banner__checkbox" type="checkbox">
<label for="bannerOffline">Show Example</label>

<div class="banner banner--offline">
  <div class="wrapper__banner-icon">
    <svg class="banner__icon" role="presentation">
      <use xlink:href="#icon-error"></use>
    </svg>
  </div>
  <div class="wrapper__banner-content">
    <p class="banner__text banner__text--offline">The restricted section of the library is forbidden to all students at Hogwarts.</p>
  </div>
</div>

Description

Offline: This banner extends the full width of the browser to draw attenton. This banner is used for network failure.

Sticky Banner

<div style="height: 400px">
  <div class="banner banner--sticky">
    <div class="wrapper__banner-icon">
      <svg class="banner__icon" role="presentation">
        <use xlink:href="#icon-info"></use>
      </svg>
    </div>
    <div class="wrapper__banner-content">
      <p class="banner__text">Gillyweed: A nifty water plant that allows the person who eats it to breathe underwater.</p>
    </div>
  </div>
</div>

Description

Sticky: This banner is used to provide context that may extend the viewable window.

Do

  • Use offline banners for network failure issues

Don't

  • Use multiple sticky banners in a container

Link Banner

<div class="banner">
  <div class="wrapper__banner-icon">
    <svg class="banner__icon" role="presentation">
      <use xlink:href="#icon-info"></use>
    </svg>
  </div>
  <div class="wrapper__banner-content">
    <p class="banner__text">
      This is the <strong>default</strong> banner
      with a <a href="#" class="banner__link">link</a>.
    </p>
  </div>
</div>

Description

Link: Banners with links provide additional context to the notification. This ensures banners remain concise. Links should navigate to other pages.

<div class="banner">
  <div class="wrapper__banner-icon">
    <svg class="banner__icon" role="presentation">
      <use xlink:href="#icon-info"></use>
    </svg>
  </div>
  <div class="wrapper__banner-content">
    <p class="banner__text">
      This is the <strong>default</strong> banner
      with a <button type="button" class="banner__link btn--link">button link</button>.
    </p>
  </div>
</div>

Description

Button Link: Banners with button links connect specifc actions to banners. Commonly this pattern is used to launch modals from banners.

Do

  • Use links for banners that need to link to other pages
  • Use button links for banners that need to link to specific actions

Don't

  • Use many links within a banner

Closeable Banner

<div class="banner banner--closeable">
  <div class="wrapper__banner-icon">
    <svg class="banner__icon" role="presentation">
      <use xlink:href="#icon-info"></use>
    </svg>
  </div>
  <div class="wrapper__banner-content">
    <p class="banner__text">
      This is the <strong>default</strong> banner
      with a <strong>close</strong> button.
    </p>
  </div>
  <button type="button" class="banner__close" aria-label="close">&times;</button>
</div>

Description

Closeable: When possible add the ability to close a banner to allow the customer to be in control of their workplace.

Do

  • Use closeable banner for content that can be dismissed

Don't

  • Add too many actions to closeable banners