Three-tier pricing cards, middle highlighted
Three flat pricing cards with the middle tier raised by a border, shadow, and a floating 'Most popular' tag. Keep feature lists to 3-5 lines per tier so the cards stay the same visual weight.
Live preview
open in new tab ↗<section class="v-price">
<h2>Scale your app, control your costs</h2>
<div class="v-price-grid">
<div class="v-price-card">
<span class="v-price-name">Hobby</span>
<div class="v-price-amt">$0</div>
<p>For personal projects and experiments.</p>
<a class="v-price-btn v-price-btn-ghost" href="#">Get started</a>
<ul><li>1 project</li><li>Community support</li><li>Basic analytics</li></ul>
</div>
<div class="v-price-card v-price-featured">
<span class="v-price-tag">Most popular</span>
<span class="v-price-name">Pro</span>
<div class="v-price-amt">$20<span>/mo</span></div>
<p>For growing teams shipping in production.</p>
<a class="v-price-btn v-price-btn-solid" href="#">Get started</a>
<ul><li>Unlimited projects</li><li>Priority support</li><li>Advanced analytics</li><li>Team roles</li></ul>
</div>
<div class="v-price-card">
<span class="v-price-name">Enterprise</span>
<div class="v-price-amt">Custom</div>
<p>For organizations with compliance and scale needs.</p>
<a class="v-price-btn v-price-btn-ghost" href="#">Contact sales</a>
<ul><li>SSO and SAML</li><li>Dedicated support</li><li>Custom SLA</li></ul>
</div>
</div>
</section>Block id: vercel-pricing-tiersvanilla · 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.