https://github.com/zachleat/announcement-banner
An announcement banner web component.
https://github.com/zachleat/announcement-banner
web-components
Last synced: 10 months ago
JSON representation
An announcement banner web component.
- Host: GitHub
- URL: https://github.com/zachleat/announcement-banner
- Owner: zachleat
- License: mit
- Created: 2020-11-27T02:58:02.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2023-11-17T20:10:02.000Z (over 2 years ago)
- Last Synced: 2025-09-11T01:50:31.050Z (11 months ago)
- Topics: web-components
- Language: HTML
- Homepage: https://zachleat.github.io/announcement-banner/demo.html
- Size: 25.4 KB
- Stars: 51
- Watchers: 4
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# announcement-banner
A reusable announcement bar banner component. If you don’t need a _Hide_ or _Close_ button on the banner (and to save the user preference), you don’t need this (just use CSS)!
* [Demo](https://zachleat.github.io/announcement-banner/demo.html)
* Read more at [_Ruthlessly Eliminating Layout Shift on Netlify.com_](https://www.zachleat.com/web/layout-shift/)
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 `key` attribute (v1.0.5+) (or backwards compatible with `data-banner-key` 1.0.3+) to set your own storage key for comparison (defaults to the first link URL).
## Installation
1. Install from [npm](https://www.npmjs.com/package/@zachleat/announcement-banner): `npm install @zachleat/announcement-banner --save`
2. Inline helper script into your ``
```js
// Inline this into your
// The current banner CTA URL
let latestBannerUrl = "YOUR_URL";
let savedKey = localStorage.getItem("banner--cta-url");
// Hide if the banner URL is the same as the saved preference banner URL
if(savedKey === latestBannerUrl) {
document.documentElement.classList.add("banner--hide");
}
```
3. Add `banner.css` and `banner.js` to your build CSS and JS.
4. Add the markup:
```html
YOUR_TEXT
Close
```
## Changelog
* `v1.0.6` npm package name changed from `herald-of-the-dog` to `@zachleat/announcement-banner`