Kaarten zijn veelzijdige UI-componenten die verschillende soorten inhoud kunnen weergeven, zoals afbeeldingen, tekst en interactieve elementen zoals knoppen. Tailwind CSS biedt een scala aan hulpmiddelen waarmee het eenvoudig is om kaartcomponenten te maken en te stijlen.

Kaartstructuur

Een basis kaartcomponent bevat doorgaans de volgende elementen: een afbeelding, een titel, beschrijvende tekst en actiekoppen.

We kennen de afzonderlijke elementen van deze component al, dus laten we al onze kennis combineren in één complete kaart.

Uitleg

1. max-w-sm: Stelt de maximale breedte van het element in op klein formaat (24rem of 384px);
2. rounded: Past kleine afgeronde hoeken toe op het element;
3. overflow-hidden: Zorgt ervoor dat alle inhoud die buiten de grenzen van het element valt, verborgen wordt;
4. shadow-lg: Voegt een grote schaduw toe aan het element.

1. w-full: Stelt de breedte van de afbeelding in op 100% van de container;
2. px-6: Voegt horizontale opvulling van 1,5rem (24px) toe aan zowel links als rechts;
3. py-4: Voegt verticale opvulling van 1rem (16px) toe aan zowel boven- als onderzijde;
4. font-bold: Past vetgedrukte letterstijl toe;
5. text-xl: Stelt de lettergrootte in op xl (1,25rem of 20px);
6. mb-2: Voegt een ondermarge van 0,5rem (8px) toe;
7. text-gray-700: Stelt de tekstkleur in op middelgrijs;
8. text-base: Stelt de lettergrootte in op basisformaat (1rem of 16px).

1. px-6: Voegt horizontale opvulling van 1.5rem (24px) toe aan zowel links als rechts;
2. pt-4: Voegt bovenopvulling van 1rem (16px) toe;
3. pb-2: Voegt onderopvulling van 0.5rem (8px) toe;
4. bg-blue-500: Stelt de achtergrondkleur in op een tint blauw;
5. hover:bg-blue-700: Wijzigt de achtergrondkleur naar een donkerdere tint blauw bij hover;
6. text-white: Stelt de tekstkleur in op wit;
7. font-bold: Past vetgedrukte letterstijl toe;
8. py-2: Voegt verticale opvulling van 0.5rem (8px) toe;
9. px-4: Voegt horizontale opvulling van 1rem (16px) toe;
10. rounded: Past kleine afgeronde hoeken toe op de knop;
11. bg-gray-500: Stelt de achtergrondkleur in op een tint grijs;
12. hover:bg-gray-700: Wijzigt de achtergrondkleur naar een donkerdere tint grijs bij hover;
13. text-white: Stelt de tekstkleur in op wit;
14. font-bold: Past vetgedrukte letterstijl toe;
15. py-2: Voegt verticale opvulling van 0.5rem (8px) toe;
16. px-4: Voegt horizontale opvulling van 1rem (16px) toe;
17. rounded: Past kleine afgeronde hoeken toe op de knop;
18. ml-2: Voegt een linker marge van 0.5rem (8px) toe.

Zoals je ziet, zijn alle utility classes al overwogen. Nu combineren we alles in één kaartcomponent.

We voegen nog een sectie toe aan het vorige voorbeeld, namelijk badges.

Uitleg - Badges

1. px-6: Voegt horizontale opvulling van 1.5rem (24px) toe aan zowel links als rechts;
2. pt-4: Voegt bovenste opvulling van 1rem (16px) toe;
3. pb-2: Voegt onderste opvulling van 0.5rem (8px) toe;
4. inline-block: Geeft het element weer als een inline-level blokcontainer;
5. bg-gray-200: Stelt de achtergrondkleur in op lichtgrijs;
6. rounded-full: Past volledig afgeronde hoeken toe op het element;
7. px-3: Voegt horizontale opvulling van 0.75rem (12px) toe aan zowel links als rechts;
8. py-1: Voegt verticale opvulling van 0.25rem (4px) toe aan zowel boven als onder;
9. text-sm: Stelt de lettergrootte in op klein (0.875rem of 14px);
10. font-semibold: Past een halfvette letterstijl toe;
11. text-gray-700: Stelt de tekstkleur in op middengrijs;
12. mr-2: Voegt een rechter marge van 0.5rem (8px) toe;
13. mb-2: Voegt een onderste marge van 0.5rem (8px) toe.

Opmerking

Alle diepgaande informatie over het Card-component is te vinden hier.