Cartes

Les cartes sont des composants d'interface utilisateur polyvalents qui peuvent afficher une variété de contenus tels que des images, du texte et des éléments interactifs comme des boutons. Tailwind CSS fournit une gamme d'utilitaires qui facilitent la création et le style des composants de carte.

Structure de la carte

Un composant de carte de base inclut 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, alors combinons toutes nos connaissances en 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 des coins arrondis petits à l'élément;
3. overflow-hidden: Assure que tout contenu qui déborde des 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 une marge intérieure horizontale de 1.5rem (24px) à gauche et à droite;
3. py-4: Ajoute une marge intérieure verticale de 1rem (16px) en haut et en bas;
4. font-bold: Applique une graisse de police en gras;
5. text-xl: Définit la taille de la 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 à un gris moyen;
8. text-base: Définit la taille de la police à base (1rem ou 16px).

1. px-6: Ajoute un padding horizontal de 1.5rem (24px) à gauche et à droite;
2. pt-4: Ajoute un padding en haut de 1rem (16px);
3. pb-2: Ajoute un padding en bas de 0.5rem (8px);
4. bg-blue-500: Définit la couleur de fond à une teinte de bleu;
5. hover:bg-blue-700: Change la couleur de fond à une teinte plus foncée de bleu au survol;
6. text-white: Définit la couleur du texte en blanc;
7. font-bold: Applique une graisse de police en gras;
8. py-2: Ajoute un padding vertical de 0.5rem (8px);
9. px-4: Ajoute un padding horizontal de 1rem (16px);
10. rounded: Applique de petits coins arrondis au bouton;
11. bg-gray-500: Définit la couleur de fond à une teinte de gris;
12. hover:bg-gray-700: Change la couleur de fond à une teinte plus foncée de gris au survol;
13. text-white: Définit la couleur du texte en blanc;
14. font-bold: Applique une graisse de police en gras;
15. py-2: Ajoute un padding vertical de 0.5rem (8px);
16. px-4: Ajoute un padding 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 voir, toutes les classes utilitaires ont déjà été prises en compte. Maintenant, nous combinons tout dans un composant de carte.

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

Explication - Badges

1. px-6: Ajoute un padding horizontal de 1.5rem (24px) à la fois à gauche et à droite;
2. pt-4: Ajoute un padding en haut de 1rem (16px);
3. pb-2: Ajoute un padding en bas de 0.5rem (8px);
4. inline-block: Affiche l'élément comme un conteneur de niveau bloc en ligne;
5. bg-gray-200: Définit la couleur de fond à un gris clair;
6. rounded-full: Applique des coins entièrement arrondis à l'élément;
7. px-3: Ajoute un padding horizontal de 0.75rem (12px) à la fois à gauche et à droite;
8. py-1: Ajoute un padding vertical de 0.25rem (4px) à la fois en haut et en bas;
9. text-sm: Définit la taille de la police à petite (0.875rem ou 14px);
10. font-semibold: Applique une épaisseur de police semi-grasse;
11. text-gray-700: Définit la couleur du texte à un gris moyen;
12. mr-2: Ajoute une marge à droite de 0.5rem (8px);
13. mb-2: Ajoute une marge en bas de 0.5rem (8px).

Remarque

Toutes les informations détaillées sur le composant Card peuvent être trouvées ici.