CSS-generator för pristabeller

Grundläggande struktur

<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>

Responsivt rutnät med tre kolumner

.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 tillsammans med minmax(240px, 1fr) ger en trekolumnslayout på desktop och en staplad enkolumnsvy i mobilen, utan att något mer behöver konfigureras.

Det framhävda paketet

Visuella signaler som drar till sig blicken:

• Färgad ram i varumärkets accentfärg.
• Lätt upplyft kort med negativ margin-top eller translateY(-4px).
• Större CTA-knapp, oftast fylld i varumärkets färg, medan övriga paket får en outlinad knapp.
• Etikett (“Populärast”, “Bäst värde”) absolutpositionerad högst upp på kortet.
• Högre kort drar blicken till sig, men gör paketen svårare att jämföra.

Använd inte allt på en gång, välj två eller tre. För många signaler plattar ut hierarkin i stället för att skapa den.

Växlare för månad / år

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

Växlaren byter oftast prisvärden med lite JavaScript, eller använder :checked-tillståndet på en radioknapp. Visa rabattprocenten eller det belopp kunden sparar (till exempel “Spara 20% vid årsbetalning”) direkt i växlarens etikett: i många pristabeller är det den enskilt mest övertygande detaljen.

Formge funktionsraderna

.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;
}

Använd bock för det som “ingår” och grå text eller ett ljust kryss för det som “inte ingår”. Stryk aldrig över texten utan att samtidigt sänka kontrasten, annars läses överstrykningen som en betoning i stället för som något som saknas.

Håll CTA:n tydlig

En CTA per paket, visuellt konsekvent över alla paket. Olika text i olika paket (“Kom igång gratis”, “Uppgradera till Pro”, “Prata med säljteamet”) är helt i sin ordning och hjälper faktiskt användaren in i rätt flöde.

Gör tabellen lätt att skumma

Användare läser sällan en pristabell från vänster till höger; de skummar först priserna, sedan CTA-knapparna, och först därefter skillnaderna i funktioner. Optimera för det beteendet:

1. Paketnamn och pris stort, högst upp på kortet.
2. CTA:n ska synas utan att kortet behöver skrollas.
3. Funktionslistan under. Lyft fram skillnaderna mellan paketen i stället för att upprepa identiska funktioner i varje kolumn.

Checklista för tillgänglighet

• Varje paket är en egen <article> med en egen <h3>.
• Etiketten “Populärast” är en synlig textetikett, inte bara en färg (för färgblinda användare).
• CTA-knapparna har beskrivande text (“Starta Pro-testet”) i stället för “Klicka här”.
• Växlaren för betalningsperiod har aria-pressed eller radioknappssemantik.
• Prisändringar vid växling annonseras via aria-live="polite" om växlingen görs med JavaScript.