> From [PageWeave Design](https://pageweave-design.pageweave.site) — a working library for agentic web development. Full index: [llms.txt](https://pageweave-design.pageweave.site/llms.txt)

# Pricing Tiers

Three plans, one highlighted, honest numbers

- Category: Components
- Tags: pricing cards conversion

## Usage

Three-tier pricing with one highlighted plan. The highlighted card gets a primary border plus a floating mono badge; everything else stays hairline.

## Rules

- Prices in the display face; currency smaller at 50% opacity beside it.
- Feature lists use plain ✓ glyphs — never icon fonts for three checkmarks.
- Equal-height cards via `flex flex-col` + `flex-1` on the list so CTAs align across tiers.
- Badge overlaps the top border (`-top-3`) — needs the parent to be `relative`.

## Honesty rules (from the PageWeave playbook)

- Never write "unlimited" — state real numbers.
- Mark the recommended tier once; don't also enlarge it, tilt it, or glow it.

## HTML source

```html
<div class="grid md:grid-cols-3 gap-6 max-w-5xl mx-auto">
  <div class="border border-base-content/10 p-8 flex flex-col">
    <p class="font-mono text-xs uppercase tracking-widest text-base-content/50">Free</p>
    <p class="mt-4 text-4xl font-medium tracking-tight" style="font-family:'Fraunces',serif">€0</p>
    <ul class="mt-6 space-y-2.5 text-sm text-base-content/75 flex-1">
      <li>✓ Full product access</li>
      <li>✓ Community support</li>
      <li>✓ 1M page views / month</li>
    </ul>
    <button class="btn btn-ghost border-base-content/20 mt-8">Start free</button>
  </div>
  <div class="border border-primary p-8 flex flex-col relative bg-base-100">
    <span class="absolute -top-3 left-8 badge badge-primary border-0 font-mono text-[0.65rem] uppercase tracking-wider">Popular</span>
    <p class="font-mono text-xs uppercase tracking-widest text-primary">Pro</p>
    <p class="mt-4 text-4xl font-medium tracking-tight" style="font-family:'Fraunces',serif">€15<span class="text-base text-base-content/50">/mo</span></p>
    <ul class="mt-6 space-y-2.5 text-sm text-base-content/75 flex-1">
      <li>✓ Everything in Free</li>
      <li>✓ Custom hostname + SSL</li>
      <li>✓ No watermark</li>
    </ul>
    <button class="btn btn-primary border-0 mt-8">Go Pro</button>
  </div>
  <div class="border border-base-content/10 p-8 flex flex-col">
    <p class="font-mono text-xs uppercase tracking-widest text-base-content/50">Team</p>
    <p class="mt-4 text-4xl font-medium tracking-tight" style="font-family:'Fraunces',serif">€49<span class="text-base text-base-content/50">/mo</span></p>
    <ul class="mt-6 space-y-2.5 text-sm text-base-content/75 flex-1">
      <li>✓ Everything in Pro</li>
      <li>✓ 10 seats included</li>
      <li>✓ Priority support</li>
    </ul>
    <button class="btn btn-ghost border-base-content/20 mt-8">Contact us</button>
  </div>
</div>
```