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

Information: This banner is used to provide general information. Warning: This banner is used to communicate an impending, non-blocking issue. Error: This banner is used to communicate a blocking change that needs to be remedied before a user can proceed. Success: This banner is used to communicate a positive or confirming action.
<tk-banner>
  Information: This banner is used to provide general information.
</tk-banner>
<tk-banner type="warning">
  Warning: This banner is used to communicate an impending, non-blocking issue.
</tk-banner>
<tk-banner type="error">
  Error: This banner is used to communicate a blocking change that needs to be remedied before a user can proceed.
</tk-banner>
<tk-banner type="success">
  Success: This banner is used to communicate a positive or confirming action.
</tk-banner>

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

Pre-order a copy of Gilderoy Lockhart's most celebrated book, .
<tk-banner>
  Pre-order a copy of Gilderoy Lockhart's most celebrated book, <a href="#" class="banner__link">Magical Me</a>.
</tk-banner>

Description

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

Need stocking stuffers? Check out Gilderoy Lockhart's thrilling adventure, .
<tk-banner>
  Need stocking stuffers? Check out Gilderoy Lockhart's thrilling adventure, <button type="button" class="banner__link">Year with the Yeti</button>.
</tk-banner>

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

This is the default banner with a close button.
<tk-banner type="info" closeable>
  This is the <strong>default</strong> banner
  with a <strong>close</strong> button.
</tk-banner>

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