Componente card con proprietà personalizzate CSS

Un componente card è un contenitore autonomo per i contenuti. Gli obiettivi di design sono: padding coerente tramite token di spaziatura, colori tematizzabili tramite token alias, dimensionamento responsive senza JavaScript e supporto alle varianti (elevata, con bordo, piatta) tramite proprietà personalizzate CSS.

Utilizzi un'unica classe .card con proprietà personalizzate CSS per i valori configurabili. Gli elementi interni (header, body, footer) ereditano dall'ambito della card. In questo modo limita la divergenza degli stili tra le istanze della card nel codebase.

Sovrascriva le proprietà personalizzate a livello di card con classi delle varianti, invece di scrivere set di regole separati. Le classi delle varianti devono ridefinire solo le variabili modificate: le proprietà invariate ereditano automaticamente i valori di base senza ripetizioni.

Quando una classe di tema del genitore modifica --color-surface, tutte le card incluse in quel tema aggiornano automaticamente il proprio sfondo. Non è necessario scrivere codice di override specifico per il tema di ogni card: il sistema dei token alias gestisce il tutto in modo trasparente.

Usi clamp() con override delle custom property per ottenere un padding fluido: --card-padding: clamp(1rem, 4vw, 2rem). Le viewport più ampie ricevono un padding più generoso, mentre quelle più piccole un padding minimo: tutto è controllato da un'unica definizione di token.

Una griglia di schede che usa CSS Grid con auto-fill e minmax crea un layout auto-organizzato: grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)). Le schede riempiono lo spazio disponibile e vanno automaticamente a capo senza breakpoint nelle media query.

Mantenga un rapporto d'aspetto coerente per le immagini delle schede usando aspect-ratio: 16/9 sul contenitore dell'immagine. Le immagini riempiono il contenitore con object-fit: cover, assicurando altezze uniformi per le schede indipendentemente dalle dimensioni delle immagini sorgente.

Aggiunga gli stati hover e focus-within che sollevano leggermente la scheda: transform: translateY(-2px) e un box-shadow più marcato. Animi con transition: transform 200ms ease, box-shadow 200ms ease per ottenere un feedback d'interazione fluido e ottimizzato per il compositing.

Renda cliccabile l'intera scheda con un link esteso: posizioni la scheda in modo relativo e il link principale in modo assoluto con inset: 0. I lettori di schermo leggono il testo del link; l'overlay copre visivamente la scheda per gli utenti del mouse.

Aggiunga una variante .card--loading che sostituisca il contenuto con uno skeleton shimmer usando un'animazione CSS: background: linear-gradient(90deg, var(--color-skeleton-from), var(--color-skeleton-to)) animata con background-size: 200% e animation: shimmer 1.5s infinite.

In modalità scura, il token --color-surface passa automaticamente da chiaro a scuro. Se le schede sollevate si basano su box-shadow per creare profondità, effetto che scompare sugli sfondi scuri, aggiunga un bordo discreto oppure aumenti il contrasto del colore di superficie per rendere percepibile il rilievo in modalità scura.

In che modo le custom property CSS consentono di creare varianti delle schede senza duplicare l'intero insieme di regole?

La creazione di un componente scheda con le custom property CSS produce un elemento UI flessibile, tematizzabile e capace di gestire varianti. Le variabili di base impostano i valori predefiniti; le classi delle varianti eseguono override mirati; le classi del tema eseguono override globali. In combinazione con dimensionamento responsivo, collegamenti accessibili e stati di caricamento, questo pattern si adatta in modo ordinato ai diversi design system.