pricing single simple one-plan conversion pricing single simple one-plan flat-rate single plan pricing one price for everything
Pricing Single
Fetch pattern JSON:
curl https://webspire.de/patterns/pricing/single.json single.html
<section class="ws-pricing bg-[var(--ws-pricing-bg)] py-20">
<div class="mx-auto max-w-3xl px-6">
<div class="overflow-hidden rounded-3xl border border-[var(--ws-pricing-card-border)]">
<div class="grid md:grid-cols-2">
<!-- Details -->
<div class="bg-[var(--ws-pricing-card-bg)] p-8 sm:p-10">
<p class="text-sm font-semibold uppercase tracking-[0.18em] text-[var(--ws-pricing-highlight-bg)]">Pro plan</p>
<h2 class="mt-3 text-2xl font-bold text-[var(--ws-pricing-text)]">Everything you need</h2>
<p class="mt-3 text-sm text-[var(--ws-pricing-text-soft)]">One simple plan with all features included. No hidden costs, no feature gates.</p>
<ul class="mt-8 space-y-3 text-sm text-[var(--ws-pricing-text-soft)]">
<li class="flex items-center gap-3">
<svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Unlimited projects
</li>
<li class="flex items-center gap-3">
<svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
All pattern families
</li>
<li class="flex items-center gap-3">
<svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
CLI & API access
</li>
<li class="flex items-center gap-3">
<svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Priority support
</li>
<li class="flex items-center gap-3">
<svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Custom branding
</li>
<li class="flex items-center gap-3">
<svg class="h-4 w-4 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5"/></svg>
Team collaboration
</li>
</ul>
</div>
<!-- Price & CTA -->
<div class="flex flex-col items-center justify-center bg-[var(--ws-pricing-bg)] p-8 text-center sm:p-10">
<p class="text-sm text-[var(--ws-pricing-text-muted)]">One price, everything included</p>
<p class="mt-4">
<span class="text-5xl font-bold text-[var(--ws-pricing-text)]">$29</span>
<span class="text-base text-[var(--ws-pricing-text-muted)]">/month</span>
</p>
<p class="mt-2 text-sm text-[var(--ws-pricing-text-muted)]">Billed monthly. Cancel anytime.</p>
<a href="#" class="mt-8 w-full rounded-xl bg-[var(--ws-pricing-action-bg)] px-6 py-3 text-sm font-semibold text-[var(--ws-pricing-action-text)] transition hover:opacity-90">Start free trial</a>
<a href="#" class="mt-3 text-sm font-medium text-[var(--ws-pricing-highlight-bg)] hover:opacity-80">See it in action →</a>
<p class="mt-6 text-xs text-[var(--ws-pricing-text-muted)]">14-day free trial. No credit card required.</p>
</div>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
pricingsinglesimpleone-planconversion
Slots
| Name | Required | Description |
|---|---|---|
| details | Yes | Plan name, description, and feature checklist. |
| price | Yes | Large price, CTA button, and trial info. |
Split pricing card for a single plan. Left side has plan name, description, and checkmark feature list on a subtle background. Right side centers the large price, monthly label, CTA button, demo link, and trial note. Inside a rounded container. Stacks vertically on mobile.