Skip to content
BaseLayer Themes

Docs

Banner01

Full-width strip above the header

Live preview

File: src/blocks/banner/Banner01.astro

Full-width announcement strip above the navbar. Optional CTA and dismiss (localStorage).

Banners are not on by default in BaseLayout — enable via config or mount them yourself. Include BannerDismissScript once on the page when any banner is dismissible.

Config (banner.ts → banner01)

banner01: {
  enabled: false,
  id: "site-banner-01",
  message: "Limited time — BOGO on all project packages.",
  bold: ["BOGO"],
  textVariant: "sm",
  width: "standard",
  background: "brand-soft",
  dismissible: true,
  dismissDays: 7,
  cta: {
    label: "View work",
    href: "/work/",
    variant: "brand",
    size: "sm",
  },
},

Set enabled: true to show site-wide (when wired in BaseLayout), or pass enabled as a prop for one-off previews.

Add to a page

---
import Banner01 from "@/blocks/banner/Banner01.astro";
import BannerDismissScript from "@/blocks/banner/BannerDismissScript.astro";
---

<Banner01 enabled message="Shipping soon — join the waitlist." bold={["Shipping soon"]} />
<BannerDismissScript />

Props

Prop Config key Notes
enabled banner01.enabled Early return if false
id banner01.id Dismiss storage key
message banner01.message
bold banner01.bold Substrings to bold
textVariant banner01.textVariant Text size variant
width banner01.width
background banner01.background Surface token
textClass — Override text color class
dismissible banner01.dismissible
dismissDays banner01.dismissDays
cta banner01.cta { label, href, variant?, size? }

Also include: BannerDismissScript.astro when dismissible.

← Banner versions · Blocks overview