Newsletter Registration
Loading playground
Overview
NewsletterRegistration is the dedicated email-list signup section, typically placed in footer regions. It bundles a heading, subline, an EmailInputForm, customizable status messages (loading, success, error, neutral), and an optional image prop that paints media alongside the copy.
Background colors and text adapt to the surrounding surface tone via <OnSurface>, so the section reads against any backdrop. Place it above the footer so signup is visible without separate-page navigation.
Key Business & UX Benefits
- A dedicated, full-width signup section gives email acquisition its own stage, lifting list growth without spinning up a separate page.
- Customizable status messages (loading, success, error, neutral) reassure shoppers at every step, cutting support tickets about "did my signup work".
- Surface-tone awareness keeps the section legible on any footer backdrop, so brand teams style freely without breaking contrast.
- Editors update the heading, subline, and media for each campaign in Studio, so seasonal hooks like "early access" or "10% off" ship the same day.
NewsletterRegistration above the footer so signup is visible without separate-page navigation.Feature List
- Full-width section bundles heading, subline, EmailInputForm, status messages, and an optional image prop
- Customizable status copy for loading, success, error, and neutral states reassures shoppers at every step
- Surface-tone awareness via <OnSurface> keeps the section legible against any footer backdrop
- Optional image prop pairs media with the signup copy for richer placements
- Editors update heading, subline, and image per campaign in Studio so seasonal hooks ship same-day
- Place above the footer so signup is visible without separate-page navigation
API Reference
| Prop | Default | Type |
|---|---|---|
caption | string | |
heading | string | |
headingColor | string | |
headingAs | TextGroupHeadingAs ("h1" | "h2" | "h3" | "h4" | "h5" | "h6" | 2 more)Semantic HTML element for the heading (h1-h6 or div). Defaults to h2. | |
subline | string | |
sublineColor | string | |
sublineAs | TextGroupSublineAs ("h1" | "h2" | "h3" | "h4" | "h5" | "h6" | 3 more)Semantic HTML element for the subline (p, h2-h6, div). Defaults to p. | |
body | string | |
legal | string | |
legalColor | string | |
emailPlaceholder | string | |
emailButton | { text, ariaLabel, iconRight, 1 more } | |
statusMessages | { showPartyPopperEmojis, loadingText, successText, 6 more } |
| Slot | Type |
|---|---|
media | anyRight-side (or top-on-mobile) content area. Replaces the legacy |