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

Family

cards

Tier

enhanced

Kind

component

Extends

cards/base

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.