Karten sind vielseitige UI-Komponenten, die verschiedene Inhalte wie Bilder, Text und interaktive Elemente wie Schaltflächen anzeigen können. Tailwind CSS bietet eine Vielzahl von Utilities, die das Erstellen und Gestalten von Kartenkomponenten erleichtern.

Kartenstruktur

Eine grundlegende Kartenkomponente umfasst typischerweise die folgenden Elemente: ein Bild, einen Titel, beschreibenden Text und Aktionsschaltflächen.

Die einzelnen Elemente dieser Komponente sind bereits bekannt, daher wird nun das gesamte Wissen in einer vollständigen Karte zusammengeführt.

Erklärung

1. max-w-sm: Legt die maximale Breite des Elements auf eine kleine Größe fest (24rem oder 384px);
2. rounded: Verleiht dem Element leicht abgerundete Ecken;
3. overflow-hidden: Stellt sicher, dass über den Rand hinausragender Inhalt ausgeblendet wird;
4. shadow-lg: Fügt dem Element einen großen Schatten hinzu.

1. w-full: Setzt die Breite des Bildes auf 100% seines Containers;
2. px-6: Fügt links und rechts einen horizontalen Innenabstand von 1,5rem (24px) hinzu;
3. py-4: Fügt oben und unten einen vertikalen Innenabstand von 1rem (16px) hinzu;
4. font-bold: Verwendet eine fette Schriftart;
5. text-xl: Setzt die Schriftgröße auf xl (1,25rem oder 20px);
6. mb-2: Fügt einen unteren Außenabstand von 0,5rem (8px) hinzu;
7. text-gray-700: Setzt die Textfarbe auf ein mittleres Grau;
8. text-base: Setzt die Schriftgröße auf Basis (1rem oder 16px).

1. px-6: Fügt auf beiden Seiten einen horizontalen Innenabstand von 1,5rem (24px) hinzu;
2. pt-4: Fügt oben einen Innenabstand von 1rem (16px) hinzu;
3. pb-2: Fügt unten einen Innenabstand von 0,5rem (8px) hinzu;
4. bg-blue-500: Setzt die Hintergrundfarbe auf einen Blauton;
5. hover:bg-blue-700: Ändert die Hintergrundfarbe beim Überfahren mit der Maus in einen dunkleren Blauton;
6. text-white: Setzt die Textfarbe auf Weiß;
7. font-bold: Wendet eine fette Schriftart an;
8. py-2: Fügt vertikal einen Innenabstand von 0,5rem (8px) hinzu;
9. px-4: Fügt horizontal einen Innenabstand von 1rem (16px) hinzu;
10. rounded: Verleiht dem Button leicht abgerundete Ecken;
11. bg-gray-500: Setzt die Hintergrundfarbe auf einen Grauton;
12. hover:bg-gray-700: Ändert die Hintergrundfarbe beim Überfahren mit der Maus in einen dunkleren Grauton;
13. text-white: Setzt die Textfarbe auf Weiß;
14. font-bold: Wendet eine fette Schriftart an;
15. py-2: Fügt vertikal einen Innenabstand von 0,5rem (8px) hinzu;
16. px-4: Fügt horizontal einen Innenabstand von 1rem (16px) hinzu;
17. rounded: Verleiht dem Button leicht abgerundete Ecken;
18. ml-2: Fügt links einen Außenabstand von 0,5rem (8px) hinzu.

Wie Sie sehen, wurden alle Utility-Klassen bereits berücksichtigt. Nun kombinieren wir alles in einer Kartenkomponente.

Fügen wir dem vorherigen Beispiel einen weiteren Abschnitt hinzu, nämlich Badges.

Erklärung – Badges

1. px-6: Fügt auf beiden Seiten einen horizontalen Innenabstand von 1,5rem (24px) hinzu;
2. pt-4: Fügt oben einen Innenabstand von 1rem (16px) hinzu;
3. pb-2: Fügt unten einen Innenabstand von 0,5rem (8px) hinzu;
4. inline-block: Stellt das Element als Inline-Block-Container dar;
5. bg-gray-200: Setzt die Hintergrundfarbe auf ein helles Grau;
6. rounded-full: Verleiht dem Element vollständig abgerundete Ecken;
7. px-3: Fügt auf beiden Seiten einen horizontalen Innenabstand von 0,75rem (12px) hinzu;
8. py-1: Fügt oben und unten einen vertikalen Innenabstand von 0,25rem (4px) hinzu;
9. text-sm: Setzt die Schriftgröße auf klein (0,875rem oder 14px);
10. font-semibold: Verwendet eine halbfette Schriftstärke;
11. text-gray-700: Setzt die Schriftfarbe auf ein mittleres Grau;
12. mr-2: Fügt rechts einen Außenabstand von 0,5rem (8px) hinzu;
13. mb-2: Fügt unten einen Außenabstand von 0,5rem (8px) hinzu.

Hinweis

Alle ausführlichen Informationen zur Card-Komponente sind hier zu finden.