newsletter popup modal overlay signup lead-capture newsletter popup modal overlay signup subscribe email backdrop newsletter popup modal email signup overlay
Newsletter Popup
Fetch pattern JSON:
curl https://webspire.de/patterns/newsletter/popup.json popup.html
<div id="newsletter-popup" class="ws-newsletter fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" role="dialog" aria-modal="true" aria-labelledby="nl-popup-heading">
<div class="relative mx-4 w-full max-w-md rounded-2xl bg-[var(--ws-newsletter-input-bg)] p-8 shadow-2xl">
<button type="button" onclick="document.getElementById('newsletter-popup').classList.add('hidden')"
class="absolute right-4 top-4 rounded-lg p-1 text-[var(--ws-newsletter-text-soft)] transition hover:opacity-70"
aria-label="Close">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<div class="text-center">
<div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-[var(--ws-newsletter-bg)]">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-[var(--ws-newsletter-action-bg)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
</svg>
</div>
<h2 id="nl-popup-heading" class="text-xl font-bold tracking-tight text-[var(--ws-newsletter-text)] sm:text-2xl">Don't miss out</h2>
<p class="mt-2 text-sm text-[var(--ws-newsletter-text-soft)]">Get weekly insights on design systems, UI patterns, and frontend best practices. Trusted by 5,000+ developers.</p>
</div>
<form class="mt-6">
<label for="nl-popup-email" class="sr-only">Email address</label>
<div class="flex gap-3">
<input type="email" id="nl-popup-email" name="email" autocomplete="email" required
class="min-w-0 flex-1 rounded-lg border border-[var(--ws-newsletter-input-border)] bg-[var(--ws-newsletter-input-bg)] px-4 py-2.5 text-sm text-[var(--ws-newsletter-text)] placeholder:text-[var(--ws-newsletter-text-soft)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-newsletter-action-bg)]"
placeholder="you@example.com">
<button type="submit"
class="flex-shrink-0 rounded-lg bg-[var(--ws-newsletter-action-bg)] px-5 py-2.5 text-sm font-semibold text-[var(--ws-newsletter-action-text)] transition hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-[var(--ws-newsletter-action-bg)] focus:ring-offset-2">Subscribe</button>
</div>
</form>
<p class="mt-4 text-center text-xs text-[var(--ws-newsletter-text-soft)]">No spam. Unsubscribe anytime. We respect your privacy.</p>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste Requires JS
Stable Published
newsletterpopupmodaloverlaysignuplead-capture
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Popup headline with value proposition. |
| description | No | Supporting text explaining the newsletter benefit. |
| form | Yes | Email input and subscribe button. |
| close | Yes | Close button to dismiss the modal. |
Newsletter popup modal on a semi-transparent dark backdrop. Centered card with close button, headline, description, inline email form, and privacy note. Rounded corners with strong shadow for depth. Supports dark mode. Toggle visibility by adding or removing the hidden class on the outer container.