herald-of-the-dog

A reusable announcement bar banner component. If you don’t need a Hide or Close button on the banner, you don’t need this (just use CSS)!

Usage no npm install needed!

<script type="module">
  import heraldOfTheDog from 'https://cdn.skypack.dev/herald-of-the-dog';
</script>

README

herald-of-the-dog

A reusable announcement bar banner component. If you don’t need a Hide or Close button on the banner, you don’t need this (just use CSS)!

Features:

  • Hyperlink to a thing.
  • Limited visual style (bring your own theme)
  • JavaScript not required.
  • Close preference saved to local storage for future page loads
  • Frameworkless: Web component
  • No CLS (cumulative layout shift):
    • Even when opted in to closed by default
    • Even when JavaScript fails
    • Even when JavaScript succeeds but runs after render
  • Use data-banner-key to set your own storage key for comparison (overrides the first link URL). (available in 1.0.3+)

Installation

  1. Install from npm: npm install herald-of-the-dog --save
  2. Inline helper script into your <head>
// Inline this into your <head>

// The current banner CTA URL, we inject this from a JSON data file
let key = "https://www.netlify.com/sustainability/";
let savedKey = localStorage.getItem("banner--cta-url");

if(savedKey === key) {
  document.documentElement.classList.add("banner--hide");
}
  1. Add herald.css and herald.js to your build CSS and JS.
  2. Add the markup:
<announcement-banner class="demo-banner">
  <a href="YOUR_URL">YOUR_TEXT</a>
  <button type="button" data-banner-close class="demo-banner-close">Close</button>
</announcement-banner>