card pricing plan features cta card pricing plan features price subscription cta button single pricing card plan card component
Card Pricing
Fetch pattern JSON:
curl https://webspire.de/patterns/cards/pricing.json pricing.html
<div class="ws-cards w-full max-w-sm rounded-2xl border border-[var(--ws-cards-border)] bg-[var(--ws-cards-bg)] p-8 shadow-sm">
<h3 class="text-lg font-semibold text-[var(--ws-cards-text)]">Pro</h3>
<p class="mt-1 text-sm text-[var(--ws-cards-text-muted)]">Everything you need to grow your business.</p>
<p class="mt-6 flex items-baseline gap-1">
<span class="text-4xl font-bold text-[var(--ws-cards-text)]">$29</span>
<span class="text-sm text-[var(--ws-cards-text-muted)]">/month</span>
</p>
<ul class="mt-8 space-y-3 text-sm text-[var(--ws-cards-text-soft)]">
<li class="flex items-center gap-2.5">
<svg class="h-4 w-4 flex-shrink-0 text-[var(--ws-cards-accent)]" 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-2.5">
<svg class="h-4 w-4 flex-shrink-0 text-[var(--ws-cards-accent)]" 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>
100 GB storage
</li>
<li class="flex items-center gap-2.5">
<svg class="h-4 w-4 flex-shrink-0 text-[var(--ws-cards-accent)]" 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>
Advanced analytics
</li>
<li class="flex items-center gap-2.5">
<svg class="h-4 w-4 flex-shrink-0 text-[var(--ws-cards-accent)]" 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-2.5">
<svg class="h-4 w-4 flex-shrink-0 text-[var(--ws-cards-accent)]" 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 domains
</li>
<li class="flex items-center gap-2.5">
<svg class="h-4 w-4 flex-shrink-0 text-[var(--ws-cards-accent)]" 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>
API access
</li>
</ul>
<a href="#" class="mt-8 block rounded-xl bg-[var(--ws-cards-accent)] py-2.5 text-center text-sm font-semibold text-white transition hover:opacity-90">Get started</a>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
cardpricingplanfeaturescta
Slots
| Name | Required | Description |
|---|---|---|
| header | Yes | Plan name and description. |
| price | Yes | Price amount and billing period. |
| features | Yes | List of included features with checkmarks. |
| cta | Yes | Call-to-action button. |
Standalone pricing card with plan name, short description, large price, 6-item feature list with checkmarks, and a full-width CTA button. Bordered with rounded-2xl. Use individually or compose into a pricing grid.