Newsletter
Newsletter Registration
Full-width newsletter subscription section with status messages, customizable copy, and an optional image prop.
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.
Pro-Tip from Larry: Place
NewsletterRegistration above the footer so signup is visible without separate-page navigation.Usage
LNewsletterRegistration
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 |
|---|---|---|
image | MediaImage { type, sources, placeholder, 2 more } | |
heading | string | |
headingColor | string | |
subline | string | |
sublineColor | string | |
legal | string | |
legalColor | string | |
emailPlaceholder | string | |
emailButton | { text, ariaLabel, iconRight, 1 more } | |
statusMessages | { showPartyPopperEmojis, loadingText, successText, 6 more } |