CSS-prijstabelgenerator

Basisstructuur

<section class="pricing">
  <article class="plan">
    <h3>Starter</h3>
    <p class="price">$9 <span>/mo</span></p>
    <p class="tagline">For solo projects.</p>
    <ul class="features">
      <li>3 projects</li>
      <li>10 GB storage</li>
      <li>Community support</li>
    </ul>
    <a class="cta" href="#">Start free</a>
  </article>

  <article class="plan featured">
    <span class="badge">Most popular</span>
    <h3>Pro</h3>
    <p class="price">$29 <span>/mo</span></p>
    <!-- ... -->
  </article>

  <article class="plan">
    <h3>Team</h3>
    <!-- ... -->
  </article>
</section>

Responsief grid met drie kolommen

.pricing {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  align-items: stretch;
}

.plan {
  padding: 2rem 1.5rem;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.plan.featured {
  border: 2px solid #2563eb;
  position: relative;
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(37, 99, 235, 0.15);
}

auto-fit in combinatie met minmax(240px, 1fr) levert drie kolommen op desktop en één kolom op mobiel, zonder dat je verder nog iets hoeft in te stellen.

Het uitgelichte abonnement

Visuele signalen die de aandacht trekken:

• Gekleurde rand in de accentkleur van het merk.
• Kaart iets omhoog met een negatieve margin-top of translateY(-4px).
• Grotere CTA-knop, meestal gevuld in de merkkleur, terwijl de andere abonnementen een outline-knop krijgen.
• Badge (“Meest gekozen”, “Beste prijs-kwaliteitverhouding”) absoluut gepositioneerd bovenaan de kaart.
• Hogere kaart trekt de blik, maar maakt het vergelijken van abonnementen lastiger.

Doe niet alles tegelijk, kies er twee of drie. Te veel signalen maken de hiërarchie juist vlak.

Schakelaar maandelijks / jaarlijks

<div class="billing-toggle">
  <button data-active="true">Monthly</button>
  <button>Annual · Save 20%</button>
</div>

De schakelaar wisselt de prijzen meestal met een klein beetje JavaScript, of gebruikt de :checked-status van een radiobutton. Zet het kortingspercentage of het bedrag dat de klant bespaart (bijvoorbeeld “Bespaar 20% bij jaarlijks betalen”) meteen in het label van de schakelaar: in veel prijstabellen is dat het meest overtuigende element.

De functieregels opmaken

.features {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.features li.yes::before {
  content: "";
  width: 16px; height: 16px;
  background: url(...check.svg);
}
.features li.no {
  color: #9ca3af;
  text-decoration: line-through;
}

Gebruik een vinkje voor wat “inbegrepen” is, en grijze tekst of een licht kruisje voor wat “niet inbegrepen” is. Streep de tekst nooit door zonder het contrast te verlagen, anders leest die doorhaling juist als nadruk in plaats van als iets dat ontbreekt.

Houd de CTA opvallend

Eén CTA per abonnement, visueel consistent over alle abonnementen. Verschillende teksten per abonnement (“Gratis beginnen”, “Upgraden naar Pro”, “Contact met sales”) mag prima en helpt gebruikers zelfs naar het juiste traject.

Maak de tabel scanbaar

Bezoekers lezen een prijstabel zelden van links naar rechts; ze scannen eerst de prijzen, dan de CTA-knoppen en pas daarna de verschillen in functies. Optimaliseer daarvoor:

1. Naam van het abonnement en prijs groot, bovenaan de kaart.
2. CTA zichtbaar zonder in de kaart te scrollen.
3. Functielijst eronder. Benadruk de verschillen tussen abonnementen in plaats van dezelfde functies in elke kolom te herhalen.

Checklist toegankelijkheid

• Elk abonnement is een eigen <article> met een eigen <h3>.
• De badge “Meest gekozen” is een zichtbaar tekstlabel, niet alleen een kleur (voor kleurenblinde gebruikers).
• CTA-knoppen hebben beschrijvende tekst (“Start de Pro-proefperiode”) in plaats van “Klik hier”.
• De schakelaar voor de betaalperiode heeft aria-pressed of de semantiek van radiobuttons.
• Prijswijzigingen bij het omschakelen worden aangekondigd via aria-live="polite" als je het met JavaScript bouwt.