paywall premium subscription content-gate pricing paywall premium subscribe lock content-gate pricing premium content paywall overlay subscription gate with pricing
Paywall Base
Fetch pattern JSON:
curl https://webspire.de/patterns/paywall/base.json base.html
<div class="ws-paywall relative mx-auto max-w-2xl overflow-hidden rounded-2xl border border-[var(--ws-paywall-border)] bg-[var(--ws-paywall-bg)]">
<!-- Blurred content background -->
<div class="select-none px-8 pt-8" aria-hidden="true">
<div class="blur-sm">
<p class="text-lg font-semibold text-[var(--ws-paywall-text)]">The Future of Design Systems</p>
<p class="mt-3 text-sm leading-relaxed text-[var(--ws-paywall-text-soft)]">Design systems have evolved from simple style guides into comprehensive platforms that enable teams to build consistent, accessible, and scalable digital products. The next generation of design systems will leverage AI to automate pattern composition and maintain quality at scale.</p>
<p class="mt-3 text-sm leading-relaxed text-[var(--ws-paywall-text-soft)]">In this article, we explore the architectural decisions behind modern token-driven systems, the role of structured registries, and how machine-readable metadata transforms how teams discover and adopt components across organizations.</p>
</div>
</div>
<!-- Overlay card -->
<div class="relative -mt-16 bg-gradient-to-t from-[var(--ws-paywall-bg)] from-60% to-transparent px-8 pb-8 pt-24 text-center">
<div class="mx-auto max-w-sm">
<div class="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-[var(--ws-paywall-accent)]/10 text-[var(--ws-paywall-accent)]">
<svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
</div>
<h2 class="text-xl font-bold text-[var(--ws-paywall-text)]">Premium Content</h2>
<p class="mt-2 text-sm text-[var(--ws-paywall-text-soft)]">Get unlimited access to all articles, guides, and exclusive resources.</p>
<p class="mt-3 text-2xl font-bold text-[var(--ws-paywall-text)]">$9.99<span class="text-sm font-normal text-[var(--ws-paywall-text-soft)]">/month</span></p>
<a href="#" class="mt-4 inline-block w-full rounded-xl bg-[var(--ws-paywall-action-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-paywall-action-text)] transition hover:opacity-90">Subscribe</a>
<p class="mt-3 text-sm text-[var(--ws-paywall-text-soft)]">Already a member? <a href="#" class="font-medium text-[var(--ws-paywall-accent)] underline underline-offset-2">Sign in</a></p>
</div>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
paywallpremiumsubscriptioncontent-gatepricing
Slots
| Name | Required | Description |
|---|---|---|
| blurredContent | Yes | Background article text rendered blurred. |
| overlay | Yes | Paywall card with lock icon, pricing, and CTA. |
Base paywall pattern. Blurred article text in the background with a gradient fade into a centered overlay card. The card shows a lock icon, “Premium Content” heading, description, monthly pricing, subscribe button, and sign-in link.