Theme
Announcement bar
One line of news across the top of the site, above the header: 48px on layer1, centred, with a textMuted link that leads on.
Examples
Props
AnnouncementBar
A one-line announcement across the top of the site, above the header.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | The news, in one short line. |
action? | { label: string; href: string; } | — | Where to read more. |
linkAs? | ElementType | "a" | The component that renders the anchor, for a framework's client-side link (Next.js's `Link`, say). The system itself knows no router. |
Keyboard
| Key | Does |
|---|---|
| Enter | Follows the link |
Accessibility
- An aside named "Announcement", so it can be found and skipped as a landmark.
- Its arrow is hidden from screen readers and mirrors in right-to-left text.