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

Olivander's Wand Shop

1 Holly and Phoenix feather wand. Buy it now.

1 Yew and Phoenix feather wand. Buy it now.

<tk-banner>
  <h2 class="t-medium mb-1x">Olivander's Wand Shop</h2>
  <p class="mb-0x">1 Holly and Phoenix feather wand. <a href="#">Buy it now.</a></p>
  <p class="mb-0x">1 Yew and Phoenix feather wand. <a href="#">Buy it now.</a></p>
</tk-banner>

Offline Banner

The restricted section of the library is forbidden to all students at Hogwarts.
<button class="btn btn--link"
  onClick="toggleBanner(event.target)"
  type="button">
  Toggle Example
</button>

<tk-banner type="error" offline is-hidden>
  The restricted section of the library is forbidden to all students at Hogwarts.
</tk-banner>

Description

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

Sticky Banner

Gillyweed: A nifty water plant that allows the person who eats it to breathe underwater.
<div style="height: 400px">
  <tk-banner sticky>
    Gillyweed: A nifty water plant that allows the person who eats it to breathe underwater.
  </tk-banner>
</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, Magical Me.
<tk-banner>
  Pre-order a copy of Gilderoy Lockhart's most celebrated book, <a href="#">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">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 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