Three-tier pricing cards with highlighted plan
Three pricing cards where the middle plan is visually elevated with a floating badge and a colored border instead of a filled background, reads as recommended without shouting. Keep exactly one featured card, two looks indecisive.
Live preview
open in new tab ↗<div class="sw-pricing-grid">
<div class="sw-price-card">
<h3>Starter</h3>
<p class="sw-price-desc">Best for individuals</p>
<p class="sw-price-amount">$0<span>/mo</span></p>
<ul class="sw-price-list">
<li>1 seat</li>
<li>1 domain</li>
<li>1,000 monthly credits</li>
</ul>
<button class="sw-price-btn sw-price-btn-outline">Subscribe</button>
</div>
<div class="sw-price-card sw-price-featured">
<span class="sw-price-badge">Best value</span>
<h3>Professional</h3>
<p class="sw-price-desc">Best for growing teams</p>
<p class="sw-price-amount">$49<span>/mo</span></p>
<ul class="sw-price-list">
<li>25 seats</li>
<li>5 domains</li>
<li>10,000 monthly credits</li>
</ul>
<button class="sw-price-btn sw-price-btn-solid">Subscribe</button>
</div>
<div class="sw-price-card">
<h3>Enterprise</h3>
<p class="sw-price-desc">Best for large teams</p>
<p class="sw-price-amount">Custom</p>
<ul class="sw-price-list">
<li>Unlimited seats</li>
<li>Multiple domains</li>
<li>Unlimited monthly credits</li>
</ul>
<button class="sw-price-btn sw-price-btn-outline">Contact sales</button>
</div>
</div>Block id: stripe-pricing-tier-cardsvanilla · swap-content
More pricing blocks
Want the whole site, not just the block?
We ship real client sites in 3 weeks — with blocks like this one, wired to your brand.