Pricing Gradient

Fetch pattern JSON: curl https://webspire.de/patterns/pricing/gradient.json
gradient.html
<section class="ws-pricing bg-[var(--ws-pricing-bg)] py-20">
  <div class="mx-auto max-w-7xl px-6">
    <div class="mx-auto max-w-2xl text-center">
      <h2 class="text-3xl font-bold tracking-tight text-[var(--ws-pricing-text)] sm:text-4xl">Simple, transparent pricing</h2>
      <p class="mt-4 text-lg text-[var(--ws-pricing-text-soft)]">Choose the plan that fits your needs. Upgrade or downgrade anytime.</p>
    </div>

    <div class="mx-auto mt-16 grid max-w-5xl items-center gap-8 lg:grid-cols-3">
      <!-- Starter -->
      <div class="rounded-2xl border border-[var(--ws-pricing-card-border)] bg-[var(--ws-pricing-card-bg)] p-8">
        <h3 class="text-lg font-semibold text-[var(--ws-pricing-text)]">Starter</h3>
        <p class="mt-1 text-sm text-[var(--ws-pricing-text-muted)]">For individuals and side projects.</p>
        <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>
        <ul class="mt-8 space-y-3 text-sm text-[var(--ws-pricing-text-soft)]">
          <li class="flex items-center gap-2"><svg class="h-4 w-4 text-[var(--ws-pricing-highlight-bg)]" 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>5 projects</li>
          <li class="flex items-center gap-2"><svg class="h-4 w-4 text-[var(--ws-pricing-highlight-bg)]" 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>10 GB storage</li>
          <li class="flex items-center gap-2"><svg class="h-4 w-4 text-[var(--ws-pricing-highlight-bg)]" 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>Basic analytics</li>
          <li class="flex items-center gap-2"><svg class="h-4 w-4 text-[var(--ws-pricing-highlight-bg)]" 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>Email support</li>
        </ul>
        <a href="#" class="mt-8 block rounded-xl border border-[var(--ws-pricing-card-border)] py-2.5 text-center text-sm font-semibold text-[var(--ws-pricing-text)] transition hover:opacity-80">Get started</a>
      </div>

      <!-- Pro (featured) — decorative gradient keeps hardcoded colors -->
      <div class="relative rounded-2xl bg-gradient-to-br from-indigo-600 to-purple-600 p-8 shadow-xl lg:scale-105">
        <span class="absolute -top-3 left-1/2 -translate-x-1/2 rounded-full bg-white px-3 py-1 text-xs font-bold text-indigo-700 shadow-sm">Most popular</span> <!-- ws-ok: badge intentionally white on gradient card -->
        <h3 class="text-lg font-semibold text-white">Pro</h3>
        <p class="mt-1 text-sm text-indigo-200">For growing teams and businesses.</p>
        <p class="mt-6"><span class="text-4xl font-bold text-white">$29</span><span class="text-sm text-indigo-200">/month</span></p>
        <ul class="mt-8 space-y-3 text-sm text-indigo-100">
          <li class="flex items-center gap-2"><svg class="h-4 w-4 text-white" 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"><svg class="h-4 w-4 text-white" 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"><svg class="h-4 w-4 text-white" 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"><svg class="h-4 w-4 text-white" 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"><svg class="h-4 w-4 text-white" 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>
        </ul>
        <a href="#" class="mt-8 block rounded-xl bg-white py-2.5 text-center text-sm font-semibold text-indigo-700 shadow-sm transition hover:bg-indigo-50">Get started</a> <!-- ws-ok: CTA intentionally white on gradient card -->
      </div>

      <!-- Enterprise -->
      <div class="rounded-2xl border border-[var(--ws-pricing-card-border)] bg-[var(--ws-pricing-card-bg)] p-8">
        <h3 class="text-lg font-semibold text-[var(--ws-pricing-text)]">Enterprise</h3>
        <p class="mt-1 text-sm text-[var(--ws-pricing-text-muted)]">For large organizations.</p>
        <p class="mt-6"><span class="text-4xl font-bold text-[var(--ws-pricing-text)]">$99</span><span class="text-sm text-[var(--ws-pricing-text-muted)]">/month</span></p>
        <ul class="mt-8 space-y-3 text-sm text-[var(--ws-pricing-text-soft)]">
          <li class="flex items-center gap-2"><svg class="h-4 w-4 text-[var(--ws-pricing-highlight-bg)]" 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>Everything in Pro</li>
          <li class="flex items-center gap-2"><svg class="h-4 w-4 text-[var(--ws-pricing-highlight-bg)]" 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>1 TB storage</li>
          <li class="flex items-center gap-2"><svg class="h-4 w-4 text-[var(--ws-pricing-highlight-bg)]" 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>SSO & SAML</li>
          <li class="flex items-center gap-2"><svg class="h-4 w-4 text-[var(--ws-pricing-highlight-bg)]" 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>Dedicated support</li>
          <li class="flex items-center gap-2"><svg class="h-4 w-4 text-[var(--ws-pricing-highlight-bg)]" 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 contracts</li>
        </ul>
        <a href="#" class="mt-8 block rounded-xl border border-[var(--ws-pricing-card-border)] py-2.5 text-center text-sm font-semibold text-[var(--ws-pricing-text)] transition hover:opacity-80">Contact sales</a>
      </div>
    </div>
  </div>
</section>
Details

Family
pricing
Tier
enhanced
Kind
section
Extends
pricing/base
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
pricinggradientcardsfeaturedplans
Slots

Name	Required	Description
heading	Yes	Section title and description.
plans	Yes	Three pricing cards with features, price, and CTA.
Three pricing cards in a row. The middle card uses an indigo-to-purple gradient background, is slightly scaled up, and has a “Most popular” badge. Outer cards are white/slate with borders. Each card has plan name, price, feature list with checkmarks, and a CTA button.