Section Signup

A card-based signup section with heading, subtext, an input, and an action button — slot your own Input and Button so it stays a real form.

Install

Examples

Default

Sign up for updates Stay up to date with releases. Subscribe

Guidelines

Usage

email capture, newsletter signup, and call-to-action blocks. For the bare inline field-plus-button, use Signup.

Do

  • State the value of signing up in the subtext — what they’ll receive.
  • Ask for one thing (an email); use a labelled type="email" input.
  • Use an action-led button label — “Subscribe”, “Get updates”.

Don’t

  • Don’t add several fields — for a full form, build one with Input directly.
  • Don’t hide the field’s accessible name — keep label set even when visually hidden.
  • Don’t use it as a page-opening CTA — that’s the Hero.

Accessibility

Properties

Related