Skip to content

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 settings.ui.css Interface tokens (see table below) Github

Playground

Behavior

Content

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

The playground’s dismiss button is inert: the persistence script lives in Banner.astro (see below).

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 settings.ui.css:

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