component :: Banner

The .banner component is the thin announcement bar at the very top of the page, optionally dismissible (remembered in localStorage).

File	Description	Source
`component.banner.css`	All banner styles	Github
`Banner.astro`	The Astro component	Github
`icons/x.svg`	Dismiss icon	Github
`--banner-*` block in default theme	Theme tokens (see table below)	Github

HTML

<aside class="banner">
  <div class="banner_content">
    <p>mCSS v1 is out! <a href="/blog/v1">Read the announcement</a></p>
  </div>
  <button class="banner_close" aria-label="Dismiss announcement"><svg>[…]</svg></button>
</aside>

For a dismissible plain-HTML banner, copy the small inline script from the bottom of Banner.astro: 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, not a separate component.

Custom properties

The following custom properties are available in the default theme:

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-<id>`). 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 <body>, above the header.

Examples

A dismissible banner. Close it and it stays closed on reload (per browser).
```
---
import Banner from "../components/Banner.astro";
---
<Banner dismissible id="v1-launch">
  <p>mCSS v1 is out! <a href="/blog/v1">Read the announcement</a></p>
</Banner>
```