Generatore di Tabelle Prezzi CSS

Struttura di base

<section class="pricing">
  <article class="plan">
    <h3>Starter</h3>
    <p class="price">9 € <span>/mese</span></p>
    <p class="tagline">Per progetti individuali.</p>
    <ul class="features">
      <li>3 progetti</li>
      <li>10 GB di spazio di archiviazione</li>
      <li>Supporto della comunità</li>
    </ul>
    <a class="cta" href="#">Inizia gratis</a>
  </article>

  <article class="plan featured">
    <span class="badge">Più popolare</span>
    <h3>Pro</h3>
    <p class="price">29 € <span>/mese</span></p>
    <!-- ... -->
  </article>

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

Griglia responsive a tre colonne

.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 + minmax(240px, 1fr) fornisce un layout a tre colonne su desktop e una pila a colonna singola su mobile, senza ulteriori configurazioni.

Il piano in evidenza

Segnali visivi che catturano l’attenzione:

• Bordo colorato nel colore d’accento del brand.
• Scheda leggermente sollevata con un margin-top negativo o translateY(-4px).
• Pulsante CTA più grande, di solito pieno nel colore del brand, mentre gli altri piani usano un pulsante con il solo contorno.
• Badge (“Il più scelto”, “Il miglior rapporto qualità-prezzo”) posizionato in absolute in cima alla scheda.
• Scheda più alta, per attirare lo sguardo, anche se rende più difficile confrontare i piani.

Non usarli tutti insieme: sceglierne due o tre basta. Troppi segnali appiattiscono la gerarchia invece di costruirla.

Selettore mensile / annuale

<div class="billing-toggle">
  <button data-active="true">Mensile</button>
  <button>Annuale · Risparmia 20%</button>
</div>

Il selettore di solito sostituisce i valori dei prezzi con un po’ di JavaScript, oppure sfrutta lo stato :checked di un pulsante radio. Mostra la percentuale di sconto o il risparmio in euro direttamente nell’etichetta del selettore (ad esempio “Annuale · Risparmia 20%”): in molte tabelle è l’elemento più persuasivo in assoluto.

Stile delle righe delle funzionalità

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

Usa un segno di spunta per ciò che è “incluso” e testo grigio o una croce tenue per ciò che “non è incluso”. Non barrare mai il testo senza abbassarne anche il contrasto: una barratura marcata si legge come enfasi, non come esclusione.

Tieni la CTA ben visibile

Una CTA per piano, coerente sul piano visivo in tutte le schede. Usare un testo diverso per ogni piano (“Inizia gratis”, “Passa a Pro”, “Parla con il commerciale”) va benissimo e anzi aiuta a indirizzare l’utente nel flusso giusto.

Rendila facile da scorrere

Gli utenti raramente leggono una tabella prezzi da sinistra a destra: guardano prima i prezzi, poi le CTA e solo alla fine le differenze tra le funzionalità. Ottimizza per questo percorso:

1. Nome del piano e prezzo in grande, in cima alla scheda.
2. CTA visibile senza dover scorrere la scheda.
3. Elenco delle funzionalità sotto. Metti in risalto le differenze tra i piani invece di ripetere le stesse funzionalità in ogni colonna.

Checklist di accessibilità

• Ogni piano è un <article> a sé, con il proprio <h3>.
• Il badge “Il più scelto” è un’etichetta testuale visibile, non solo un colore (per gli utenti daltonici).
• I pulsanti CTA hanno un testo descrittivo (“Inizia la prova di Pro”) invece di “Clicca qui”.
• Il selettore di fatturazione usa aria-pressed o la semantica dei pulsanti radio.
• Se il cambio di prezzo è gestito in JavaScript, annuncialo tramite aria-live="polite".