Components / Pricing Tiers
Live preview — rendered in this site's theme
Pricing Tiers
Free
€0
- ✓ Full access
- ✓ 1M views/mo
Popular
Pro
€15/mo
- ✓ Custom domain
- ✓ No watermark
Team
€49/mo
- ✓ 10 seats
- ✓ Priority help
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 Copy-paste source
<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>