Newsletter sign-up component (Fronts, on theguardian.com)

## Newsletter sign-up component (Fronts, on theguardian.com)

### Summary

Build a newsletter sign-up component that occupies a single editorial slot on Guardian fronts. The component displays inline within the front, with a "Preview latest" CTA that opens a preview modal, and a "Sign up" CTA.

For logged-in users, sign-up is completed directly from the card with no modal. For logged-out users, tapping "Sign up" opens a sign-up modal to capture their email address.

---

### User stories

- As a **logged-in user**, I can sign up to a newsletter with a single tap directly from the card, so that I don't need to re-enter my email.
- As a **logged-out user**, I can enter my email address in the sign-up modal to sign up to a newsletter.
- As **any user**, I can preview the latest edition of a newsletter before deciding to sign up.
- As a **logged-in user who has just signed up**, I see a confirmation state inline on the card so I know the action was successful.
- As a **logged-out user who has just signed up**, I see a confirmation state within the sign-up modal so I know the action was successful.
- As a **logged-in user already subscribed** to the displayed newsletter, I see the confirmation state inline on the card, with no sign-up CTA shown.
- As **any user**, I can dismiss the preview modal and return to the front.

---

### Component states

#### 1. Inline card — Default

The card occupies one editorial slot on the front. It displays:

- Newsletter illustration/image (configurable per newsletter)
- Label: `📧 Newsletter | [Frequency]`
- Frequency is only shown if 10 characters or fewer; if longer, the label renders as `📧 Newsletter` only
- Newsletter name as heading (e.g. "Sign up to Saturday Edition")
- Description copy (configurable)
- Two CTAs: "Preview latest" (secondary/outline) and "Sign up" (primary/filled)
- Disclaimer copy (small print re: charities, ads, privacy policy link)

**Responsive behaviour:**
- **Mobile:** CTAs stack vertically, full-width
- **Desktop:** CTAs sit side-by-side, below the description

---

#### 2. Inline card — Success / confirmation (logged-in)

Tapping "Sign up" on the card triggers sign-up directly, with no modal. On success, the card updates inline to display:

- Newsletter illustration/image
- Label: `📧 Newsletter | [Frequency]` — frequency display rule applies as above
- Newsletter name as heading
- Description copy
- Green tick icon
- **"You're signed up!"** followed by confirmation copy: "You will receive [Newsletter name] [frequency]." — dynamically populated
- CTA: "Browse more" (secondary/outline) — links to https://www.theguardian.com/email-newsletters

---

#### 3. Inline card — Already subscribed (logged-in)

If a logged-in user is already subscribed to the displayed newsletter, the card renders directly in the confirmation state. No sign-up CTA is shown and no modal is triggered.

- Newsletter illustration/image
- Label: `📧 Newsletter | [Frequency]` — frequency display rule applies as above
- Newsletter name as heading
- Description copy
- Green tick icon
- **"You're signed up!"** followed by confirmation copy: "You will receive [Newsletter name] [frequency]." — dynamically populated
- CTA: "Browse more" (secondary/outline) — links to https://www.theguardian.com/email-newsletters

---

#### 4. Sign-up modal — Logged-out user

Triggered by tapping "Sign up" on the inline card for logged-out users only.

- Header: Newsletter illustration (configurable)
- Label: `📧 Newsletter | [Frequency]` — frequency display rule applies as above
- Newsletter name as heading
- Description copy
- Email input field (labelled "Enter your email")
- "Sign up" button
- Marketing preferences opt-in toggle (pre-revealed, not gated behind field focus)
- Disclaimer copy
- Close affordance: ✕ icon (top right)
- **Mobile:** bottom sheet
- **Desktop:** centred dialog

**Responsive behaviour:**
- **Mobile:** email input and button stack vertically, full-width
- **Desktop:** email input and button sit inline

---

#### 5. Sign-up modal — Success / confirmation (logged-out)

Displayed within the modal after successful sign-up for logged-out users.

- Green tick icon
- **"You're signed up!"**
- Confirmation copy: "You will receive [Newsletter name] [frequency]." — dynamically populated
- CTA: "Browse more newsletters" (secondary/outline, full-width) — links to https://www.theguardian.com/email-newsletters
- Close affordance: ✕ icon remains

---

#### 6. Preview modal

Triggered by tapping "Preview latest" on the inline card. Available to all users regardless of auth state.

- Header: "[Newsletter name] preview"
- Body: Rendered preview of the latest newsletter edition (scrollable)
- Footer CTA: "Close" (secondary/outline, full-width)
- Close affordance: ✕ icon (top right)
- **Mobile:** bottom sheet
- **Desktop:** centred dialog

> **Note:** Preview modal design is TBC subject to how modals are implemented in the Guardian design system. The above reflects current designs but should be validated against any existing modal patterns before build.

---

### Editable content per newsletter

The following should be configurable so the component can be reused across any newsletter:

- Newsletter name (e.g. "Saturday Edition")
- Frequency label (e.g. "Weekly")
- Frequency is only shown if 10 characters or fewer; if longer, the label renders as `📧 Newsletter` only
- Description copy
- Illustration/image
- Confirmation message copy

---

### Placement

- One editorial slot on Guardian fronts
- Placed manually by editors

---

### Design gaps & open questions

- **Already-subscribed (logged-out):** If a logged-out user submits an email address already associated with an active subscription, what is the message/error or alternative state?
- **Preview modal pattern:** Confirm modal implementation against the Guardian design system before build.

---

### Assets

Figma file
https://www.figma.com/design/ucERNBXZ9CAObsjnVWqgEi/Newsletter-Sign-Up-Component?node-id=1810-20465