File: src/blocks/banner/Banner01.astro
Full-width announcement strip rendered above the navbar in BaseLayout. Prefer one active banner at a time.
Config (banner.ts → banner.banner01)
banner01: {
enabled: true,
id: "launch",
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" },
},Add to a page
---
import Banner01 from "@/blocks/banner/Banner01.astro";
---
<Banner01 />Props override matching keys from config:
<Banner01
width="wide"
/>Props
| Prop | Config key | Type / values | Default / notes |
|---|---|---|---|
enabled |
banner.banner01.enabled |
boolean |
Master switch — also controlled from banner config in BaseLayout |
id |
banner.banner01.id |
string |
— |
message |
banner.banner01.message |
string |
— |
bold |
banner.banner01.bold |
string[] |
Substrings of message rendered bold |
textVariant |
banner.banner01.textVariant |
display | displaySm | eyebrow | lg | base | sm | xs |
Banner message text style |
width |
banner.banner01.width |
standard | narrow | wide |
Wrapper max-width |
background |
banner.banner01.background |
brand | brand-soft | strong | surface | elevated | warning | success |
Surface / background token |
textClass |
banner.banner01.textClass |
string |
Optional extra classes on banner text |
dismissible |
banner.banner01.dismissible |
boolean |
Show dismiss control; persists with dismissDays |
dismissDays |
banner.banner01.dismissDays |
number |
Days to keep the banner dismissed in localStorage |
cta |
banner.banner01.cta |
{ label, href, variant?: brand|outline|ghost, size?: sm|md|lg } |
— |
Include BannerDismissScript.astro when dismissible is true.