<tk-banner>
  Information: This banner is used to provide general information. <a class="t-link" href="#">Learn more</a>
</tk-banner>
<tk-banner type="tip">
  Tip: This banner is used to guide users through the experience. <a class="t-link" href="#">Learn more</a>
</tk-banner>
<tk-banner type="warning">
  Warning: This banner is used to communicate an impending, non-blocking issue. <a class="t-link" href="#">Learn more</a>
</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. <a class="t-link" href="#">Learn more</a>
</tk-banner>
<tk-banner type="success">
  Success: This banner is used to communicate a positive or confirming action. <a class="t-link" href="#">Learn more</a>
</tk-banner>

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

<tk-button
  onClick="toggleBanner(event.target)"
  type="ghost"
>
  Show Example
</tk-button>

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

<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>

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

<tk-banner>
  Need stocking stuffers? Check out Gilderoy Lockhart's thrilling adventure, <button class="btn--link" type="button">Year with the Yeti</button>.
</tk-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>
<tk-button class="hidden"
  onClick="showBanner(event.target)"
  type="ghost"
>
  Show banner again?
</tk-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>