# Banner > Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/banner The `.banner` component is the thin announcement bar at the very top of the page, optionally dismissible (remembered in `localStorage`).

mCSS v1 is out! Read the announcement

| File | Description | Source | | ----------------------------------- | ------------------------------ | ----------- | | `component.banner.css` | All banner styles | [Github][1] | | `Banner.astro` | The Astro component | [Github][2] | | `icons/x.svg` | Dismiss icon | [Github][3] | | `--banner-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][4] |

[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.banner.css [2]: https://github.com/minimaldesign/mCSS/blob/main/src/components/Banner.astro [3]: https://github.com/minimaldesign/mCSS/tree/main/src/assets/icons [4]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css ## Playground

{content}

{close} `} snippets={{ close: { preview: ``, code: '', }, }} controls={[ { heading: "Behavior", items: [ { type: "checkbox", name: "close", label: "Dismissible", snippet: "close", default: true }, ]}, { heading: "Content", items: [ { type: "text", name: "content", label: "Text", default: "mCSS v1 is out!" }, ]}, ]} /> The playground's dismiss button is inert: the persistence script lives in Banner.astro (see below). ## HTML ```html ``` For a dismissible plain-HTML banner, copy the small inline script from the bottom of [Banner.astro][2]: it removes the banner when the stored key exists (before paint, so an already-dismissed banner never flashes) and stores the key on click. Looking for the big closing call-to-action band instead? That's a [Section recipe](/components/section), not a separate component. ### Custom properties The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):

| Property | Description | | --------------------------- | ------------------- | | `--banner-color` | Banner text color. | | `--banner-background-color` | Banner background. |

## Astro component

| Prop | Type | Default | Description | | -------------- | --------- | ------------------------- | -------------------------------------------------------- | | `id` | `string` | `undefined` | Required when dismissible; keys the `localStorage` entry (`mcss-banner-`). Use a new id per campaign so a new announcement shows again. | | `dismissible` | `boolean` | `false` | Adds the close button + persistence script. | | `dismissLabel` | `string` | `"Dismiss announcement"` | Accessible name of the close button. | | `class` | `string` | `undefined` | Additional CSS classes. |

The default slot is the banner content. Place the banner as the first child of ``, above the header. ## Examples

A dismissible banner. Close it and it stays closed on reload (per browser).
```astro --- import Banner from "../components/Banner.astro"; ---
mCSS v1 is out! Read the announcement
```