Le card sono componenti UI versatili che possono mostrare una varietà di contenuti come immagini, testo ed elementi interattivi come pulsanti. Tailwind CSS offre una gamma di utility che facilitano la creazione e la personalizzazione dei componenti card.

Struttura della Card

Un componente card di base include tipicamente i seguenti elementi: un'immagine, un titolo, un testo descrittivo e pulsanti di azione.

Conosciamo già i singoli elementi di questo componente, quindi uniamo tutte le nostre conoscenze in una card completa.

Spiegazione

1. max-w-sm: Imposta la larghezza massima dell'elemento su una dimensione piccola (24rem o 384px);
2. rounded: Applica angoli arrotondati piccoli all'elemento;
3. overflow-hidden: Garantisce che qualsiasi contenuto che supera i limiti dell'elemento venga nascosto;
4. shadow-lg: Applica un'ombra esterna grande all'elemento.

1. w-full: Imposta la larghezza dell'immagine al 100% del suo contenitore;
2. px-6: Aggiunge un padding orizzontale di 1.5rem (24px) sia a sinistra che a destra;
3. py-4: Aggiunge un padding verticale di 1rem (16px) sia in alto che in basso;
4. font-bold: Applica uno stile di carattere grassetto;
5. text-xl: Imposta la dimensione del carattere su xl (1.25rem o 20px);
6. mb-2: Aggiunge un margine inferiore di 0.5rem (8px);
7. text-gray-700: Imposta il colore del testo su un grigio medio;
8. text-base: Imposta la dimensione del carattere su base (1rem o 16px).

1. px-6: Aggiunge un padding orizzontale di 1.5rem (24px) sia a sinistra che a destra;
2. pt-4: Aggiunge un padding superiore di 1rem (16px);
3. pb-2: Aggiunge un padding inferiore di 0.5rem (8px);
4. bg-blue-500: Imposta il colore di sfondo su una tonalità di blu;
5. hover:bg-blue-700: Cambia il colore di sfondo in una tonalità di blu più scura al passaggio del mouse;
6. text-white: Imposta il colore del testo su bianco;
7. font-bold: Applica uno stile di carattere grassetto;
8. py-2: Aggiunge un padding verticale di 0.5rem (8px);
9. px-4: Aggiunge un padding orizzontale di 1rem (16px);
10. rounded: Applica angoli leggermente arrotondati al pulsante;
11. bg-gray-500: Imposta il colore di sfondo su una tonalità di grigio;
12. hover:bg-gray-700: Cambia il colore di sfondo in una tonalità di grigio più scura al passaggio del mouse;
13. text-white: Imposta il colore del testo su bianco;
14. font-bold: Applica uno stile di carattere grassetto;
15. py-2: Aggiunge un padding verticale di 0.5rem (8px);
16. px-4: Aggiunge un padding orizzontale di 1rem (16px);
17. rounded: Applica angoli leggermente arrotondati al pulsante;
18. ml-2: Aggiunge un margine sinistro di 0.5rem (8px).

Come puoi vedere, tutte le classi utility sono già state considerate. Ora, combiniamo tutto in un unico componente card.

Aggiungiamo un'altra sezione all'esempio precedente, che sarà badges.

Spiegazione - Badge

1. px-6: Aggiunge un padding orizzontale di 1.5rem (24px) sia a sinistra che a destra;
2. pt-4: Aggiunge un padding superiore di 1rem (16px);
3. pb-2: Aggiunge un padding inferiore di 0.5rem (8px);
4. inline-block: Visualizza l'elemento come un contenitore di tipo blocco inline;
5. bg-gray-200: Imposta il colore di sfondo su grigio chiaro;
6. rounded-full: Applica angoli completamente arrotondati all'elemento;
7. px-3: Aggiunge un padding orizzontale di 0.75rem (12px) sia a sinistra che a destra;
8. py-1: Aggiunge un padding verticale di 0.25rem (4px) sia sopra che sotto;
9. text-sm: Imposta la dimensione del carattere su piccolo (0.875rem o 14px);
10. font-semibold: Applica uno spessore del carattere semi-grassetto;
11. text-gray-700: Imposta il colore del testo su grigio medio;
12. mr-2: Aggiunge un margine destro di 0.5rem (8px);
13. mb-2: Aggiunge un margine inferiore di 0.5rem (8px).

Nota

Tutte le informazioni dettagliate sul componente Card sono disponibili qui.