newsletter minimal inline signup email newsletter minimal inline signup email subscribe compact simple newsletter signup inline email subscription
Newsletter Minimal
Fetch pattern JSON:
curl https://webspire.de/patterns/newsletter/minimal.json minimal.html
<section class="ws-newsletter bg-[var(--ws-newsletter-bg)] py-20">
<div class="mx-auto max-w-xl px-6 text-center">
<h2 class="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 the latest updates delivered straight to your inbox. No spam, ever.</p>
<form class="mt-8 flex flex-col gap-3 sm:flex-row">
<label for="nl-min-email" class="sr-only">Email address</label>
<input type="email" id="nl-min-email" name="email" autocomplete="email" required
class="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)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-newsletter-action-bg)]"
placeholder="Enter your email">
<button type="submit" class="rounded-lg bg-[var(--ws-newsletter-action-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-newsletter-action-text)] transition hover:opacity-90">Subscribe</button>
</form>
<p class="mt-3 text-xs text-[var(--ws-newsletter-text-soft)]">We respect your privacy. Unsubscribe at any time.</p>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
newsletterminimalinlinesignupemail
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Title and short description. |
| form | Yes | Inline email input with submit button. |
Compact newsletter section with centered heading, one-line description, and an inline form. Email input and submit button sit side by side on desktop, stack on mobile. Privacy note below. No decoration — pure function.