← All patterns

Pricing · HTML + CSS starter

Keep the choice simple

A straightforward pricing section with three clearly defined plans.

Make it your own

Starter example. Replace the sample content and links before publishing. Paste into an HTML page, or adapt the markup and styles to your framework.

          <section class="pp-section" aria-labelledby="section-title">
  <p class="pp-label">A fresh perspective</p>
  <h2 id="section-title">A little plan. A big possibility.</h2>
  <p>Make something that feels like you. Start with a strong foundation and make it your own.</p>
  <div class="pp-columns"><article><h3>Starter</h3><p>For your next idea.</p></article><article><h3>Studio</h3><p>For your growing practice.</p></article><article><h3>Team</h3><p>For working together.</p></article></div>
</section>
<style>
.pp-section{background:#F9FAFB;color:#0F1521;padding:clamp(2rem,8vw,6rem);font:1rem/1.6 system-ui,sans-serif;border-radius:1.5rem}.pp-section h2{font-size:clamp(2rem,5vw,4rem);line-height:1.05;letter-spacing:-.05em;max-width:16ch;margin:1rem 0}.pp-section p{max-width:52ch}.pp-label{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em}.pp-action{display:inline-block;background:#0F1521;color:#fff;border-radius:5rem;padding:1rem 1.5rem;margin-top:1.5rem;text-decoration:none}.pp-columns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12rem),1fr));gap:1.5rem;margin-top:2rem}.pp-columns article{padding:1.5rem;background:#fff;color:#0F1521;border-radius:1rem}.pp-section details{padding:1rem 0;border-bottom:.0625rem solid currentColor}.pp-section summary{cursor:pointer}
</style>