Le card sono i mattoni del web design moderno. Il Nielsen Norman Group le definisce come contenitori che raggruppano informazioni correlate in unità scansionabili e flessibili. Progettiamo sistemi card che aiutano gli utenti a navigare, confrontare e decidere — che Lei stia mostrando 6 servizi o 6.000 prodotti.
VARIANTI PATTERN
Mostri la Sua offerta aziendale in una griglia facilmente consultabile. Ogni card include un'icona, titolo, breve descrizione e CTA.
Il pilastro dell'e-commerce. Immagine, titolo, prezzo, valutazione e CTA aggiungi al carrello. Progettate per la consultazione rapida.
Presenti il Suo team con foto, nome, ruolo e opzionali biografia o link social.
Mostri il lavoro con immagine dominante, titolo progetto, nome cliente e tag categoria. L'immagine fa la maggior parte della vendita.
Confronti i piani affiancati. Ogni card include nome piano, prezzo, elenco funzionalità e CTA.
Mostri citazioni clienti con avatar, nome, ruolo, azienda e testo testimonianza.
Anteprima post blog con immagine in evidenza, titolo, estratto, autore, data e tag categoria.
Griglia card asimmetrica dove le card hanno dimensioni diverse — alcune occupano 2 colonne, alcune sono alte, alcune larghe.
ANIMAZIONI E EFFETTI
Le card appaiono una per una con un leggero ritardo tra ciascuna, creando un effetto cascata mentre l'utente scorre.
Quando usarlo: Qualsiasi griglia card dove il contenuto si carica mentre l'utente scorre. Crea ritmo e attira l'attenzione.
La card si eleva (translateY da -4px a -8px) e l'ombra si approfondisce al hover, simulando profondità fisica.
Quando usarlo: Qualsiasi card cliccabile. L'interazione card più comune e attesa.
L'immagine della card si ingrandisce leggermente (1.05-1.1x) al hover mentre il contenitore taglia l'overflow.
Quando usarlo: Card portfolio, card prodotto, card blog — ovunque l'immagine sia l'elemento visivo primario.
Un overlay semi-trasparente scorre in entrata al hover, rivelando informazioni aggiuntive nascoste nello stato predefinito.
Quando usarlo: Griglie portfolio dove vuole una griglia visiva pulita ma deve mostrare dettagli all'interazione.
Layout stile Pinterest dove card di diverse altezze si incastrano senza spazi. Nuove card si caricano dinamicamente.
Quando usarlo: Gallerie immagini, archivi blog, feed contenuti generati dagli utenti con altezze naturalmente diverse.
La card ruota di 180 gradi al hover per rivelare un retro con contenuto diverso.
Quando usarlo: Card team (fronte: foto, retro: biografia), card prezzi (fronte: funzionalità, retro: confronto). Usi con parsimonia.
BEST PRACTICE
ESEMPI PREMIATI
Card funzionalità su sfondo scuro con bordi gradienti sottili. Minimalista, denso di informazioni e tecnicamente preciso. Ogni card comunica una funzionalità.
Layout griglia bento con card di dimensioni diverse. Effetti glassmorfici e animazioni sottili rendono i dati finanziari densi più accessibili.
Card prodotto perfezionate. Carosello immagini per card, overlay prezzo, valutazione e icona cuore. Mostra esattamente abbastanza informazioni per decidere se cliccare.
Griglia card pulita con altezze coerenti, categorie chiare e anteprime miniature. L'hover rivela un CTA "Usa template". Scala perfettamente.
IL NOSTRO PROCESSO
Inventari tutti gli elementi che appariranno come card. Definisca il modello dati: quali campi esistono e i loro vincoli di lunghezza contenuto.
Definisca il numero colonne per breakpoint (4 desktop, 2 tablet, 1 mobile). Imposti spaziatura gap, padding e border-radius.
Progetti la card in Figma come componente riutilizzabile con varianti: predefinita, hover, attiva, caricamento, stato vuoto.
Definisca effetti hover, comparsa attivata da scroll e tempistiche transizione. Mantenga il tempo totale animazione sotto i 500ms.
Costruisca con CSS Grid o Flexbox. Architettura basata su componenti. GSAP per animazioni scroll, CSS per effetti hover.
Testi con dati reali, casi limite, cross-browser, interazione touch su mobile e audit accessibilità.
PATTERN CORRELATI
La sezione che introduce il Suo contenuto prima della griglia card.
Scopra di più →Un pattern card specializzato per confrontare livelli servizio.
Scopra di più →Card testimonianze e griglie loghi che costruiscono fiducia.
Scopra di più →Card articoli e layout scoperta contenuti.
Scopra di più →FAQ
Le card funzionano meglio per navigare collezioni diverse (prodotti, servizi, portfolio). Le liste funzionano meglio per contenuti classificati o sequenziali. Le tabelle funzionano meglio per confronti ricchi di dati. Il layout dovrebbe corrispondere all'intento dell'utente.
3-4 su desktop (1280px+), 2 su tablet (768px), 1 su mobile (375px). Più di 4 per riga rende le singole card troppo piccole da consultare.
Sì, sempre. Rapporti misti creano altezze card irregolari che rompono la griglia. Usi object-fit: cover per ritagliare le immagini coerentemente.
Definisca un'altezza card fissa per riga. Tronchi il testo lungo con CSS line-clamp. Progetti per il caso peggiore e assicuri che il contenuto più breve sembri ancora bilanciato.
Effettueremo un audit del Suo layout attuale, identificheremo opportunità per il design basato su card e proporremo un sistema scalabile.