Banner
`<pura-banner>` is a full-width strip for persistent notices (maintenance, news, billing alert, promotion) with a per-variant icon, title, message, optional action, and dismiss button. Use it at the top of a page or section, optionally pinning it with `sticky`. It has an agent-native layer: each banner gets a stable `data-pura-id`, joins the global registry `window.__puraBanners`, and mirrors its live state in `data-pura-banner-*` attributes (variant, dismissible, sticky, dismissed), letting agents enumerate, read, and dismiss banners without inspecting the DOM tree.
Preview
<pura-banner variant="promo" dismissible title="Annual plan with 30% off"
message="Offer valid until the end of the month for new subscribers.">
<pura-button slot="action" size="sm" variant="ghost">Get the deal</pura-button>
</pura-banner>
<pura-banner id="aviso-manut" variant="warning" dismissible sticky
title="Scheduled maintenance"
message="The system will be unavailable this Saturday, from 2 AM to 4 AM.">
</pura-banner>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
variant | "info" | "success" | "warning" | "danger" | "promo" | info | Sets the banner's background color, border, and icon. An invalid value falls back to info. |
title | string | — | Text for the bold title line; serves as a fallback for the title slot. |
message | string | — | Body text of the message; serves as a fallback for the default slot. |
dismissible | boolean | false | Renders the close button that fires the dismiss event and hides the banner. |
sticky | boolean | false | Positions the banner as sticky at the top of the scroll container (z-index 50). |
label | string | "<Variant> announcement" | Accessible label (aria-label) for the region; default derived from the variant. |
Installation
pura is copy-paste and dependency-free. Load the whole library, or just this component.
<link rel="stylesheet" href="/pura/tokens.css">
<script type="module" src="/pura/lib/banner.js"></script>import "./pura/lib/banner.js";