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. Tip: This banner is used to guide users through the experience. 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="tip">
  Tip: This banner is used to guide users through the experience.
</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

<tk-banner id="banner" closeable onClose="showToggler(event.target)">
  This is the <strong>default</strong> banner
  with a <strong>close</strong> button.
</tk-banner>
<button class="btn btn--link hidden"
  onClick="showBanner(event.target)"
  type="button">
  Show banner again?
</button>

<script>
  const banner = document.getElementById('banner'); // Safari
  banner.addEventListener('close', (e) => showToggler(e.target)); // Safari

  const showBanner = (element) => {
    const banner = element.previousElementSibling;
    banner.removeAttribute('is-hidden');
    element.classList.add('hidden');
  };

  const showToggler = (element) => {
    const button = element.nextElementSibling;
    button.classList.remove('hidden');
  };
</script>

Description

Closeable: When possible add the ability to close a banner to allow the customer to be in control of their workplace. In the example above, the banner is listening for the close event to be emitted. Then it calls the showToggler method.

Because Safari doesn’t yet support GlobalEventHandlers.onclose, you’ll need to add the event listener if using the component in plain HTML. This is not necessary in Angular since (close) can just be used as an output.

Props

Property Default Description
closeable false Adds a close button to hide the banner.
isHidden false Sets the visibility of the banner. Useful if you want to hide the banner until an action is completed.
sticky false Pins the banner to the top of its container.
type info Changes the appearance of the banner to convey severity of information. Other types are error, success, or warning.

Events

Name Description
close Emits whenever the banner’s close button is clicked. Useful if you don’t want the banner to reappear on refresh.

Do

  • Use closeable banner for content that can be dismissed

Don't

  • Add too many actions to closeable banners