Banner02

File: src/blocks/banner/Banner02.astro

Fixed floating pill banner (centered, high z-index) with radius, shadow, and top offset. Optional dismiss and CTA.

Include BannerDismissScript once when dismissible.

Config (banner.ts → banner02)

banner02: {
  enabled: false,
  id: "site-banner-02",
  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", // "none" | "md" | "lg" | "full"
  shadow: "subtle", // "none" | "subtle" | "medium"
  offsetTop: "1rem",
},

Add to a page

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

<Banner02
  enabled
  message="Limited offer — 20% off this week."
  borderRadius="lg"
  shadow="medium"
  offsetTop="5.5rem"
/>
<BannerDismissScript />

Props

Also include: BannerDismissScript.astro when dismissible.

← Banner versions · Blocks overview