Banner
Full-width, page-level announcement above the header. One per page.
Preview
HTML and CSS
The same component as plain HTML with pixels-ui.css, no framework needed.
<div class="stack" style="width:100%">
<div class="px-banner" role="region" aria-label="Announcement" data-px-dismissible><svg class="px-icon" aria-hidden="true">…</svg><span class="px-banner__msg">Pixels 2.0 is here — new tokens, RTL and density modes.</span><a class="px-btn px-btn--sm px-btn--inverse" href="#">Read more</a><button type="button" class="px-icon-btn" data-px-dismiss aria-label="Dismiss"><svg class="px-icon" aria-hidden="true">…</svg></button></div>
<div class="px-banner px-banner--warning" role="region" aria-label="Maintenance"><svg class="px-icon" aria-hidden="true">…</svg><span class="px-banner__msg">Scheduled maintenance on Sunday, 02:00–04:00 GMT.</span></div>
<div class="px-banner px-banner--neutral" role="region" aria-label="Trial"><svg class="px-icon" aria-hidden="true">…</svg><span class="px-banner__msg">Your trial ends in 3 days.</span></div>
</div>Usage
- Dismissible unless critical.
Installation
Included in the core files. No extra install.
<link rel="stylesheet" href="/css/pixels-tokens.css">
<link rel="stylesheet" href="/css/pixels-ui.css">
<script src="/js/pixels-ui.js" defer></script>API reference
| Class / attribute | Type | Description |
|---|---|---|
px-banner · --neutral · --warning | class | Tone (Brand default). |
Figma properties
Banner6 variants · page “Alerts & Notifications”Open
Full-width, page-level announcement above the header (maintenance, trial ending, policy changes). One per page; dismissible unless critical. Horizontal padding follows --px-layout-margin.
| Property | Type | Values |
|---|---|---|
| Message | Text | “Scheduled maintenance on Sunday, 02:00–04:00 GMT. Some features may be unavailable.” |
| Close | Boolean | — |
| Tone | Variant | Brand Neutral Warning |
| Direction | Variant | LTR RTL |
Design tokens
Component tokens from the Figma Component collection. Override them to restyle just this component.
| Token | Alias | Light value |
|---|---|---|
--px-banner-brand-background | color-background-brand-default | #2563eb |
--px-banner-brand-content | color-content-on-color | #ffffff |
--px-banner-brand-icon | color-content-on-color | #ffffff |
--px-banner-neutral-background | color-surface-inverse | #101828 |
--px-banner-neutral-content | color-content-inverse | #ffffff |
--px-banner-neutral-icon | color-content-inverse | #ffffff |
--px-banner-warning-background | color-background-warning-subtle | #fffaeb |
--px-banner-warning-content | color-content-neutral-primary | #101828 |
--px-banner-warning-icon | color-content-warning-default | #b54708 |
Accessibility
- Give the region a label.