Les cartes sont des composants d’interface utilisateur polyvalents pouvant afficher divers contenus tels que images, texte et éléments interactifs comme des boutons. Tailwind CSS propose une gamme d’utilitaires facilitant la création et la personnalisation de composants carte.

Structure d’une carte

Un composant carte de base comprend généralement les éléments suivants : une image, un titre, un texte descriptif et des boutons d’action.

Nous connaissons déjà les éléments séparés de ce composant, combinons donc toutes nos connaissances pour créer une carte complète.

Explication

1. max-w-sm : Définit la largeur maximale de l’élément à une petite taille (24rem ou 384px) ;
2. rounded : Applique de petits coins arrondis à l’élément ;
3. overflow-hidden : Garantit que tout contenu dépassant les limites de l’élément est masqué ;
4. shadow-lg : Applique une grande ombre portée à l’élément.

1. w-full : Définit la largeur de l’image à 100 % de son conteneur ;
2. px-6 : Ajoute un espacement horizontal de 1,5rem (24px) à gauche et à droite ;
3. py-4 : Ajoute un espacement vertical de 1rem (16px) en haut et en bas ;
4. font-bold : Applique une graisse de police forte ;
5. text-xl : Définit la taille de police à xl (1,25rem ou 20px) ;
6. mb-2 : Ajoute une marge inférieure de 0,5rem (8px) ;
7. text-gray-700 : Définit la couleur du texte sur un gris moyen ;
8. text-base : Définit la taille de police à base (1rem ou 16px).

1. px-6 : Ajoute un remplissage horizontal de 1,5rem (24px) à gauche et à droite ;
2. pt-4 : Ajoute un remplissage supérieur de 1rem (16px) ;
3. pb-2 : Ajoute un remplissage inférieur de 0,5rem (8px) ;
4. bg-blue-500 : Définit la couleur de fond sur une teinte de bleu ;
5. hover:bg-blue-700 : Change la couleur de fond pour une teinte de bleu plus foncée au survol ;
6. text-white : Définit la couleur du texte sur blanc ;
7. font-bold : Applique une graisse de police forte ;
8. py-2 : Ajoute un remplissage vertical de 0,5rem (8px) ;
9. px-4 : Ajoute un remplissage horizontal de 1rem (16px) ;
10. rounded : Applique de petits coins arrondis au bouton ;
11. bg-gray-500 : Définit la couleur de fond sur une teinte de gris ;
12. hover:bg-gray-700 : Change la couleur de fond pour une teinte de gris plus foncée au survol ;
13. text-white : Définit la couleur du texte sur blanc ;
14. font-bold : Applique une graisse de police forte ;
15. py-2 : Ajoute un remplissage vertical de 0,5rem (8px) ;
16. px-4 : Ajoute un remplissage horizontal de 1rem (16px) ;
17. rounded : Applique de petits coins arrondis au bouton ;
18. ml-2 : Ajoute une marge à gauche de 0,5rem (8px).

Comme vous pouvez le constater, toutes les classes utilitaires ont déjà été prises en compte. Maintenant, nous combinons tout dans un composant carte.

Ajoutons une section supplémentaire à l'exemple précédent, qui sera les badges.

Explication - Badges

1. px-6 : Ajoute un remplissage horizontal de 1,5rem (24px) à gauche et à droite ;
2. pt-4 : Ajoute un remplissage supérieur de 1rem (16px) ;
3. pb-2 : Ajoute un remplissage inférieur de 0,5rem (8px) ;
4. inline-block : Affiche l’élément comme un conteneur de type bloc en ligne ;
5. bg-gray-200 : Définit la couleur d’arrière-plan sur un gris clair ;
6. rounded-full : Applique des coins entièrement arrondis à l’élément ;
7. px-3 : Ajoute un remplissage horizontal de 0,75rem (12px) à gauche et à droite ;
8. py-1 : Ajoute un remplissage vertical de 0,25rem (4px) en haut et en bas ;
9. text-sm : Définit la taille de police sur petite (0,875rem ou 14px) ;
10. font-semibold : Applique une graisse de police semi-grasse ;
11. text-gray-700 : Définit la couleur du texte sur un gris moyen ;
12. mr-2 : Ajoute une marge droite de 0,5rem (8px) ;
13. mb-2 : Ajoute une marge inférieure de 0,5rem (8px).

Remarque

Toutes les informations détaillées sur le composant Card sont disponibles ici.