Library · Forms & CTAs

CTA / Newsletter Signup Band

Inline newsletter email-capture band — email field + submit via the Form/Input primitives (attribute + native validation), so it works without custom JS. Tone via the shared contract.

Figma: CTA / Newsletter Signup Band ↗

Live preview — edit theme bottom-right

---
import CtaNewsletter from "../components/figma/CtaNewsletter.astro";
---
<CtaNewsletter
  heading="Stay in the loop"
  blurb="Be first to hear about new releases, price updates, and display suite openings."
  action="/subscribe"
  buttonLabel="Subscribe"
  consentText="We'll only email you about this development. Unsubscribe anytime."
  tone="primary"
/>

Props

Name	Type	Required	Description
`heading`	`string;`	Yes	Heading
`blurb`	`string;`	—	Optional supporting line
`action`	`string;`	Yes	Form submit URL
`buttonLabel`	`string;`	—	Submit button label (default: 'Subscribe')
`consentText`	`string;`	—	Optional consent / privacy line under the form
`tone`	`"base-100" \| "base-200" \| "base-300" \| "primary" \| "secondary" \| "neutral";`	—	Background tone — the Figma colour-variant axis

Example with all props

<CtaNewsletter
  heading="Stay in the loop"
  blurb="Be first to hear about new releases."
  action="/subscribe"
  consentText="Unsubscribe anytime."
  tone="primary"
/>