Skip to content
BaseLayer Themes

Banner 02

Fixed floating pill with dismiss

Live preview

File: src/blocks/banner/Banner02.astro

Fixed floating announcement pill inset from the top of the viewport. Same content model as Banner 01, plus radius, shadow, and top offset.

Config (banner.ts → banner.banner02)

banner02: {
  enabled: true,
  id: "case-studies",
  message: "New case studies just dropped — explore recent work.",
  bold: ["case studies"],
  textVariant: "sm",
  width: "wide",
  background: "elevated",
  dismissible: true,
  dismissDays: 14,
  cta: { label: "Browse projects", href: "/work/", variant: "outline", size: "sm" },
  borderRadius: "lg",
  shadow: "subtle",
  offsetTop: "1rem",
},

Add to a page

---
import Banner02 from "@/blocks/banner/Banner02.astro";
---

<Banner02 />

Props override matching keys from config:

<Banner02
  width="wide"
/>

Props

Prop Config key Type / values Default / notes
enabled banner.banner02.enabled boolean Master switch — also controlled from banner config in BaseLayout
id banner.banner02.id string —
message banner.banner02.message string —
bold banner.banner02.bold string[] Substrings of message rendered bold
textVariant banner.banner02.textVariant display | displaySm | eyebrow | lg | base | sm | xs Banner message text style
width banner.banner02.width standard | narrow | wide Wrapper max-width
background banner.banner02.background brand | brand-soft | strong | surface | elevated | warning | success Surface / background token
textClass banner.banner02.textClass string Optional extra classes on banner text
dismissible banner.banner02.dismissible boolean Show dismiss control; persists with dismissDays
dismissDays banner.banner02.dismissDays number Days to keep the banner dismissed in localStorage
cta banner.banner02.cta { label, href, variant?: brand|outline|ghost, size?: sm|md|lg } —
borderRadius banner.banner02.borderRadius none | md | lg | full —
shadow banner.banner02.shadow none | subtle | medium —
offsetTop banner.banner02.offsetTop string CSS length for floating banner top offset (e.g. 1rem)

Include BannerDismissScript.astro when dismissible is true.

← Banner versions · Blocks overview