1.0.5 • Published 6 months ago
herald-of-the-dog v1.0.5
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 the
keyattribute (v1.0.5+) (or backwards compatible withdata-banner-key1.0.3+) to set your own storage key for comparison (defaults to the first link URL).
Installation
- Install from npm:
npm install herald-of-the-dog --save - 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");
}- Add
herald.cssandherald.jsto your build CSS and JS. - 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>