newsletter email signup lead-capture cta newsletter email subscribe signup lead email newsletter signup section lead capture form
Newsletter Base
Fetch pattern JSON:
curl https://webspire.de/patterns/newsletter/base.json base.html
<section class="ws-newsletter bg-[var(--ws-newsletter-bg)] py-16">
<div class="mx-auto max-w-2xl px-6 text-center">
<h2 class="text-balance text-2xl font-bold tracking-tight text-[var(--ws-newsletter-text)] sm:text-3xl">Stay in the loop</h2>
<p class="mt-3 text-base text-[var(--ws-newsletter-text-soft)]">Get notified about new patterns, CSS effects, and registry updates. No spam, unsubscribe anytime.</p>
<form class="mt-8 flex flex-col gap-3 sm:flex-row sm:justify-center" action="#" method="post">
<label for="newsletter-email" class="sr-only">Email address</label>
<input id="newsletter-email" name="email" type="email" required autocomplete="email" placeholder="you@company.com" class="min-w-0 flex-1 rounded-lg border border-[var(--ws-newsletter-input-border)] bg-[var(--ws-newsletter-input-bg)] px-4 py-3 text-sm text-[var(--ws-newsletter-text)] placeholder:text-[var(--ws-newsletter-text-soft)] transition focus:outline-none focus:ring-2 focus:ring-[var(--ws-newsletter-action-bg)] sm:max-w-xs">
<button type="submit" class="rounded-lg bg-[var(--ws-newsletter-action-bg)] px-5 py-3 text-sm font-semibold text-[var(--ws-newsletter-action-text)] transition hover:opacity-90">Subscribe</button>
</form>
<p class="mt-4 text-xs text-[var(--ws-newsletter-text-soft)]">We respect your privacy. Read our <a href="#" class="underline hover:text-[var(--ws-newsletter-text)]">privacy policy</a>.</p>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
newsletteremailsignuplead-capturecta
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Signup headline. |
| description | No | Supporting text. |
| form | Yes | Email input and submit button. |
Centered newsletter signup on an indigo branded background. Includes email input, subscribe button, and privacy note. Form stacks vertically on mobile. Connect the form action to your email service for production use.