pricing minimal clean simple cards pricing minimal clean simple cards lightweight no-frills minimal pricing cards simple clean pricing section
Pricing Minimal
Fetch pattern JSON:
curl https://webspire.de/patterns/pricing/minimal.json minimal.html
<section class="ws-pricing bg-[var(--ws-pricing-bg)] py-20">
<div class="mx-auto max-w-5xl px-6">
<div class="mx-auto max-w-2xl text-center">
<h2 class="text-balance text-3xl font-bold tracking-tight text-[var(--ws-pricing-text)] sm:text-4xl">Simple pricing</h2>
<p class="mt-4 text-base text-[var(--ws-pricing-text-soft)]">No hidden fees. No complicated tiers.</p>
</div>
<div class="mt-12 grid gap-6 md:grid-cols-3">
<!-- Starter -->
<div class="rounded-2xl border border-[var(--ws-pricing-card-border)] bg-[var(--ws-pricing-card-bg)] p-8 text-center">
<h3 class="text-lg font-semibold text-[var(--ws-pricing-text)]">Starter</h3>
<p class="mt-6">
<span class="text-4xl font-bold text-[var(--ws-pricing-text)]">$9</span>
<span class="text-sm text-[var(--ws-pricing-text-muted)]">/month</span>
</p>
<p class="mt-3 text-sm text-[var(--ws-pricing-text-soft)]">For individuals getting started.</p>
<a href="#" class="mt-6 block rounded-xl border border-[var(--ws-pricing-card-border)] px-4 py-2.5 text-sm font-semibold text-[var(--ws-pricing-text)] transition hover:opacity-80">Get started</a>
</div>
<!-- Pro -->
<div class="rounded-2xl border-2 border-[var(--ws-pricing-highlight-bg)] bg-[var(--ws-pricing-card-bg)] p-8 text-center shadow-md">
<h3 class="text-lg font-semibold text-[var(--ws-pricing-text)]">Pro</h3>
<p class="mt-6">
<span class="text-4xl font-bold text-[var(--ws-pricing-text)]">$29</span>
<span class="text-sm text-[var(--ws-pricing-text-muted)]">/month</span>
</p>
<p class="mt-3 text-sm text-[var(--ws-pricing-text-soft)]">For teams that need more power.</p>
<a href="#" class="mt-6 block rounded-xl bg-[var(--ws-pricing-action-bg)] px-4 py-2.5 text-sm font-semibold text-[var(--ws-pricing-action-text)] transition hover:opacity-90">Start free trial</a>
</div>
<!-- Enterprise -->
<div class="rounded-2xl border border-[var(--ws-pricing-card-border)] bg-[var(--ws-pricing-card-bg)] p-8 text-center">
<h3 class="text-lg font-semibold text-[var(--ws-pricing-text)]">Enterprise</h3>
<p class="mt-6">
<span class="text-4xl font-bold text-[var(--ws-pricing-text)]">$79</span>
<span class="text-sm text-[var(--ws-pricing-text-muted)]">/month</span>
</p>
<p class="mt-3 text-sm text-[var(--ws-pricing-text-soft)]">For organizations at scale.</p>
<a href="#" class="mt-6 block rounded-xl border border-[var(--ws-pricing-card-border)] px-4 py-2.5 text-sm font-semibold text-[var(--ws-pricing-text)] transition hover:opacity-80">Contact sales</a>
</div>
</div>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
pricingminimalcleansimplecards
Slots
| Name | Required | Description |
|---|---|---|
| heading | Yes | Section title and subtitle. |
| plans | Yes | Minimal pricing cards with name, price, description, CTA. |
Ultra-clean pricing section with three centered cards. Each card has only plan name, large price, one-line description, and a CTA button. No feature lists — maximum visual simplicity. Pro card highlighted with colored border and subtle shadow.