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

Family

pricing

Tier

enhanced

Kind

section

Extends

pricing/base

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.