# Banner sections > One-line announcements above or below the page, from a slim notice to an email signup, a cookie prompt and a countdown. URL: https://apogee.avaui.dev/docs/banner-sections Last updated: 2026-10-20 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](https://apogee.avaui.dev/docs/sections/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](https://apogee.avaui.dev/docs/countdown). The close button removes the banner. ```sh npx @ava-ui/apogee add banner/slim ``` ```astro --- import Slim from '../components/apogee/blocks/banner/Slim.astro' --- ``` ## 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](https://apogee.avaui.dev/docs/sections/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. [ ![](https://apogee.avaui.dev/thumbs/banner-sections__text-field.light.webp)![](https://apogee.avaui.dev/thumbs/banner-sections__text-field.dark.webp) Text fieldAn email field and a Subscribe button beside the message, as a floating card on a neutral fill. ](https://apogee.avaui.dev/docs/banner-sections/text-field)[ ![](https://apogee.avaui.dev/thumbs/banner-sections__text-field-brand.light.webp)![](https://apogee.avaui.dev/thumbs/banner-sections__text-field-brand.dark.webp) Text field brandAn email field and a Subscribe button beside the message, as a floating card on the brand colour. ](https://apogee.avaui.dev/docs/banner-sections/text-field-brand)[ ![](https://apogee.avaui.dev/thumbs/banner-sections__single-action.light.webp)![](https://apogee.avaui.dev/thumbs/banner-sections__single-action.dark.webp) Single actionAn icon, a one-line announcement and one link button, as a floating card on a neutral fill. ](https://apogee.avaui.dev/docs/banner-sections/single-action)[ ![](https://apogee.avaui.dev/thumbs/banner-sections__single-action-brand.light.webp)![](https://apogee.avaui.dev/thumbs/banner-sections__single-action-brand.dark.webp) Single action brandAn icon, a one-line announcement and one link button, as a floating card on the brand colour. ](https://apogee.avaui.dev/docs/banner-sections/single-action-brand)[ ![](https://apogee.avaui.dev/thumbs/banner-sections__dual-action.light.webp)![](https://apogee.avaui.dev/thumbs/banner-sections__dual-action.dark.webp) Dual actionA cookie notice with Decline and Allow buttons, as a floating card on a neutral fill. ](https://apogee.avaui.dev/docs/banner-sections/dual-action)[ ![](https://apogee.avaui.dev/thumbs/banner-sections__dual-action-brand.light.webp)![](https://apogee.avaui.dev/thumbs/banner-sections__dual-action-brand.dark.webp) Dual action brandA cookie notice with Decline and Allow buttons, as a floating card on the brand colour. ](https://apogee.avaui.dev/docs/banner-sections/dual-action-brand)[ ![](https://apogee.avaui.dev/thumbs/banner-sections__slim.light.webp)![](https://apogee.avaui.dev/thumbs/banner-sections__slim.dark.webp) SlimOne centred line with a link, nothing else, as a floating card on a neutral fill. ](https://apogee.avaui.dev/docs/banner-sections/slim)[ ![](https://apogee.avaui.dev/thumbs/banner-sections__slim-brand.light.webp)![](https://apogee.avaui.dev/thumbs/banner-sections__slim-brand.dark.webp) Slim brandOne centred line with a link, nothing else, as a floating card on the brand colour. ](https://apogee.avaui.dev/docs/banner-sections/slim-brand)[ ![](https://apogee.avaui.dev/thumbs/banner-sections__text-field-full-width.light.webp)![](https://apogee.avaui.dev/thumbs/banner-sections__text-field-full-width.dark.webp) Text field, full widthAn email field and a Subscribe button beside the message, as a bar across the page on a neutral fill. ](https://apogee.avaui.dev/docs/banner-sections/text-field-full-width)[ ![](https://apogee.avaui.dev/thumbs/banner-sections__text-field-brand-full-width.light.webp)![](https://apogee.avaui.dev/thumbs/banner-sections__text-field-brand-full-width.dark.webp) Text field brand, full widthAn email field and a Subscribe button beside the message, as a bar across the page on the brand colour. ](https://apogee.avaui.dev/docs/banner-sections/text-field-brand-full-width)[ ![](https://apogee.avaui.dev/thumbs/banner-sections__single-action-full-width.light.webp)![](https://apogee.avaui.dev/thumbs/banner-sections__single-action-full-width.dark.webp) Single action, full widthAn icon, a one-line announcement and one link button, as a bar across the page on a neutral fill. ](https://apogee.avaui.dev/docs/banner-sections/single-action-full-width)[ ![](https://apogee.avaui.dev/thumbs/banner-sections__single-action-brand-full-width.light.webp)![](https://apogee.avaui.dev/thumbs/banner-sections__single-action-brand-full-width.dark.webp) Single action brand, full widthAn icon, a one-line announcement and one link button, as a bar across the page on the brand colour. ](https://apogee.avaui.dev/docs/banner-sections/single-action-brand-full-width)[ ![](https://apogee.avaui.dev/thumbs/banner-sections__dual-action-full-width.light.webp)![](https://apogee.avaui.dev/thumbs/banner-sections__dual-action-full-width.dark.webp) Dual action, full widthA cookie notice with Decline and Allow buttons, as a bar across the page on a neutral fill. ](https://apogee.avaui.dev/docs/banner-sections/dual-action-full-width)[ ![](https://apogee.avaui.dev/thumbs/banner-sections__dual-action-brand-full-width.light.webp)![](https://apogee.avaui.dev/thumbs/banner-sections__dual-action-brand-full-width.dark.webp) Dual action brand, full widthA cookie notice with Decline and Allow buttons, as a bar across the page on the brand colour. ](https://apogee.avaui.dev/docs/banner-sections/dual-action-brand-full-width)[ ![](https://apogee.avaui.dev/thumbs/banner-sections__slim-full-width.light.webp)![](https://apogee.avaui.dev/thumbs/banner-sections__slim-full-width.dark.webp) Slim, full widthOne centred line with a link, nothing else, as a bar across the page on a neutral fill. ](https://apogee.avaui.dev/docs/banner-sections/slim-full-width)[ ![](https://apogee.avaui.dev/thumbs/banner-sections__slim-brand-full-width.light.webp)![](https://apogee.avaui.dev/thumbs/banner-sections__slim-brand-full-width.dark.webp) Slim brand, full widthOne centred line with a link, nothing else, as a bar across the page on the brand colour. ](https://apogee.avaui.dev/docs/banner-sections/slim-brand-full-width)[ ![](https://apogee.avaui.dev/thumbs/banner-sections__countdown.light.webp)![](https://apogee.avaui.dev/thumbs/banner-sections__countdown.dark.webp) CountdownA centred offer with the time left until it ends, as a floating card on a neutral fill. ](https://apogee.avaui.dev/docs/banner-sections/countdown)[ ![](https://apogee.avaui.dev/thumbs/banner-sections__countdown-brand.light.webp)![](https://apogee.avaui.dev/thumbs/banner-sections__countdown-brand.dark.webp) Countdown brandA centred offer with the time left until it ends, as a floating card on the brand colour. ](https://apogee.avaui.dev/docs/banner-sections/countdown-brand)[ ![](https://apogee.avaui.dev/thumbs/banner-sections__countdown-full-width.light.webp)![](https://apogee.avaui.dev/thumbs/banner-sections__countdown-full-width.dark.webp) Countdown, full widthA centred offer with the time left until it ends, as a bar across the page on a neutral fill. ](https://apogee.avaui.dev/docs/banner-sections/countdown-full-width)[ ![](https://apogee.avaui.dev/thumbs/banner-sections__countdown-brand-full-width.light.webp)![](https://apogee.avaui.dev/thumbs/banner-sections__countdown-brand-full-width.dark.webp) Countdown brand, full widthA centred offer with the time left until it ends, as a bar across the page on the brand colour. ](https://apogee.avaui.dev/docs/banner-sections/countdown-brand-full-width) ## Related [ BannerA one-line announcement as a floating card or a full-width bar, with an icon, actions and a close button. ](https://apogee.avaui.dev/docs/sections/banner)[ CountdownThe time left until a date, as boxed numbers with unit labels, ticking every second. ](https://apogee.avaui.dev/docs/countdown)[ DismissibleWrap anything with a close button, with an optional auto-dismiss timeout. ](https://apogee.avaui.dev/docs/dismissible)