Library · Forms & CTAs

CTA / Simple Banner

Focused headline + CTA band (no form, no photo), with an optional secondary link. Tone via the shared contract.

Live preview — edit theme bottom-right

---
import CtaSimpleBanner from "../components/figma/CtaSimpleBanner.astro";
---
<CtaSimpleBanner
  heading="Ready to make it yours?"
  blurb="Book a private appointment at our display suite this weekend."
  cta={{ label: "Book a viewing", href: "#" }}
  secondaryCta={{ label: "Download brochure", href: "#" }}
  tone="secondary"
/>

Props

Name	Type	Required	Description
`heading`	`string;`	Yes	Headline
`blurb`	`string;`	—	Optional supporting line
`cta`	`CtaLink;`	Yes	Primary call to action
`secondaryCta`	`CtaLink;`	—	Optional secondary call to action
`centered`	`boolean;`	—	Centre the content (default: true)
`tone`	`"base-100" \| "base-200" \| "base-300" \| "primary" \| "secondary" \| "neutral";`	—	Background tone — the Figma colour-variant axis

Example with all props

<CtaSimpleBanner
  heading="Ready to make it yours?"
  blurb="Book a private appointment this weekend."
  cta={{ label: "Book a viewing", href: "#" }}
  secondaryCta={{ label: "Download brochure", href: "#" }}
  tone="secondary"
/>