Newsletter Signup
Compact newsletter or mailing-list signup block used in footers or inline CTAs
What is it?
A newsletter signup encourages users to join a mailing list with a short value proposition, an email input, and a clear submit action.
Mockdown
``` Stay in the loop. Get product updates and tips. [ Email input __________________ ] [Subscribe] ``` Characteristics: - Minimal form fields (email only preferred) - Clear privacy reassurance or low-friction copy - Inline success feedback and double-opt-in considerations
Layouts Using This Pattern
┌───────────────────────────────────────────────┐
│ ┌───────────────────────────────────────┐ │
│ │ ✉ Preview text goes here... │ │
│ └───────────────────────────────────────┘ │
│ │
│ ◉ ACME Inc. │
│ │
│ ┌───────────────────────────────────────┐ │
│ │ │ │
│ │ 🚀 Introducing Our New Feature │ │
│ │ │ │
│ │ We've been working hard to bring │ │
│ │ you something special... │ │
│ │ │ │
│ │ [ Learn More → ] │ │
│ │ │ │
│ └───────────────────────────────────────┘ │
│ │
│ ┌──────────┐ ┌──────────┐ ┌──────────┐ │
│ │ Feature 1│ │ Feature 2│ │ Feature 3│ │
│ │ desc │ │ desc │ │ desc │ │
│ └──────────┘ └──────────┘ └──────────┘ │
│ │
│ Unsubscribe · Preferences · View Online │
└───────────────────────────────────────────────┘Marketing
Product Launch Email Campaign
A responsive HTML email layout for a product launch — featuring a hero image, feature highlights, social proof, and a single focused CTA — compatible with major email clients.
--email--campaign--launch
Simple
┌───────────────────────────────────────────────┐
│ Logo Features Pricing ◆ Get Started │
├───────────────────────────────────────────────┤
│ │
│ Build something amazing. │
│ The fastest way to ship your app. │
│ │
│ [ Get Started ] [ Learn More → ] │
│ │
├───────────────────────────────────────────────┤
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
│ │ ⚡ Fast │ │ 🔒 Safe │ │ 📦 Easy │ │
│ │ Feature │ │ Feature │ │ Feature │ │
│ │ desc... │ │ desc... │ │ desc... │ │
│ └───────────┘ └───────────┘ └───────────┘ │
├───────────────────────────────────────────────┤
│ "Loved by 10,000+ developers" ★★★★★ │
├───────────────────────────────────────────────┤
│ Logo · Twitter · GitHub · © 2026 │
└───────────────────────────────────────────────┘Landing Page
SaaS Product Landing Page
A conversion-focused SaaS landing page with a hero section, feature grid, social proof, pricing preview, and a sticky CTA — built to drive sign-ups.
--hero--cta--features
Medium
Use these prompts to generate layouts built with this pattern.
Ready to build?
Use this pattern as inspiration when creating UI layouts with AI tools.