Banner sections

One-line announcements above or below the page, from a slim notice to an email signup, a cookie prompt and a countdown.

Last updated October 20, 2026

Each example is a block built on the Banner section: a floating card or a full-width bar, on a neutral fill or the brand colour, with an icon, actions or a Countdown. The close button removes the banner.

npx @ava-ui/apogee add banner/slim

---
import Slim from '../components/apogee/blocks/banner/Slim.astro'
---

<Slim />

Copy is props

Every block in this family takes the same content props (BannerContent in sections/_shared/banner.ts), with its sample copy as the defaults. A block ignores the props it has no place for, so you can swap one block for another and keep the copy. The Banner section takes the same names for the props they share.

heading: The one-line message. Asterisks are dropped; banner blocks have no accent style.
description: The quieter line. In blocks with a link, asterisks mark the linked words; other blocks drop them.
linkHref: Where the starred words in description link to; null leaves them as plain text.
primaryAction: The one link button.
submitLabel: The email form’s button.
closeLabel: The close button’s accessible name.
Pass null to hide an optional part, such as description={null}.
Some blocks add props of their own; the top of each block’s file lists them.

Text fieldAn email field and a Subscribe button beside the message, as a floating card on a neutral fill.

Text field brandAn email field and a Subscribe button beside the message, as a floating card on the brand colour.

Single actionAn icon, a one-line announcement and one link button, as a floating card on a neutral fill.

Single action brandAn icon, a one-line announcement and one link button, as a floating card on the brand colour.

Dual actionA cookie notice with Decline and Allow buttons, as a floating card on a neutral fill.

Dual action brandA cookie notice with Decline and Allow buttons, as a floating card on the brand colour.

SlimOne centred line with a link, nothing else, as a floating card on a neutral fill.

Slim brandOne centred line with a link, nothing else, as a floating card on the brand colour.

Text field, full widthAn email field and a Subscribe button beside the message, as a bar across the page on a neutral fill.

Text field brand, full widthAn email field and a Subscribe button beside the message, as a bar across the page on the brand colour.

Single action, full widthAn icon, a one-line announcement and one link button, as a bar across the page on a neutral fill.

Single action brand, full widthAn icon, a one-line announcement and one link button, as a bar across the page on the brand colour.

Dual action, full widthA cookie notice with Decline and Allow buttons, as a bar across the page on a neutral fill.

Dual action brand, full widthA cookie notice with Decline and Allow buttons, as a bar across the page on the brand colour.

Slim, full widthOne centred line with a link, nothing else, as a bar across the page on a neutral fill.

Slim brand, full widthOne centred line with a link, nothing else, as a bar across the page on the brand colour.

CountdownA centred offer with the time left until it ends, as a floating card on a neutral fill.

Countdown brandA centred offer with the time left until it ends, as a floating card on the brand colour.

Countdown, full widthA centred offer with the time left until it ends, as a bar across the page on a neutral fill.

Countdown brand, full widthA centred offer with the time left until it ends, as a bar across the page on the brand colour.

BannerA one-line announcement as a floating card or a full-width bar, with an icon, actions and a close button.

CountdownThe time left until a date, as boxed numbers with unit labels, ticking every second.

DismissibleWrap anything with a close button, with an optional auto-dismiss timeout.