Karten

Karten sind vielseitige UI-Komponenten, die eine Vielzahl von Inhalten anzeigen können, wie z.B. Bilder, Text und interaktive Elemente wie Schaltflächen. Tailwind CSS bietet eine Reihe von Utilities, die es einfach machen, Kartenkomponenten zu erstellen und zu stylen.

Kartenstruktur

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

Wir kennen bereits die einzelnen Elemente dieser Komponente, also lassen Sie uns all unser Wissen in einer vollständigen Karte kombinieren.

Erklärung

1. max-w-sm: Setzt die maximale Breite des Elements auf eine kleine Größe (24rem oder 384px);
2. rounded: Wendet kleine abgerundete Ecken auf das Element an;
3. overflow-hidden: Stellt sicher, dass jeglicher Inhalt, der die Grenzen des Elements überschreitet, verborgen wird;
4. shadow-lg: Wendet einen großen Schatten auf das Element an.

1. w-full: Setzt die Breite des Bildes auf 100% seines Containers;
2. px-6: Fügt horizontalen Abstand von 1.5rem (24px) sowohl links als auch rechts hinzu;
3. py-4: Fügt vertikalen Abstand von 1rem (16px) sowohl oben als auch unten hinzu;
4. font-bold: Wendet fetten Schriftgrad an;
5. text-xl: Setzt die Schriftgröße auf xl (1.25rem oder 20px);
6. mb-2: Fügt einen unteren Rand 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 horizontalen Abstand von 1.5rem (24px) sowohl links als auch rechts hinzu;
2. pt-4: Fügt oberen Abstand von 1rem (16px) hinzu;
3. pb-2: Fügt unteren Abstand von 0.5rem (8px) hinzu;
4. bg-blue-500: Setzt die Hintergrundfarbe auf einen Blauton;
5. hover:bg-blue-700: Ändert die Hintergrundfarbe bei Hover in einen dunkleren Blauton;
6. text-white: Setzt die Textfarbe auf weiß;
7. font-bold: Wendet fettgedruckte Schrift an;
8. py-2: Fügt vertikalen Abstand von 0.5rem (8px) hinzu;
9. px-4: Fügt horizontalen Abstand von 1rem (16px) hinzu;
10. rounded: Wendet kleine abgerundete Ecken auf den Button an;
11. bg-gray-500: Setzt die Hintergrundfarbe auf einen Grauton;
12. hover:bg-gray-700: Ändert die Hintergrundfarbe bei Hover in einen dunkleren Grauton;
13. text-white: Setzt die Textfarbe auf weiß;
14. font-bold: Wendet fettgedruckte Schrift an;
15. py-2: Fügt vertikalen Abstand von 0.5rem (8px) hinzu;
16. px-4: Fügt horizontalen Abstand von 1rem (16px) hinzu;
17. rounded: Wendet kleine abgerundete Ecken auf den Button an;
18. ml-2: Fügt einen linken Rand von 0.5rem (8px) hinzu.

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

Fügen wir dem vorherigen Beispiel einen weiteren Abschnitt hinzu, der Badges sein wird.

Erklärung - Abzeichen

1. px-6: Fügt horizontalen Abstand von 1.5rem (24px) sowohl links als auch rechts hinzu;
2. pt-4: Fügt oberen Abstand von 1rem (16px) hinzu;
3. pb-2: Fügt unteren Abstand von 0.5rem (8px) hinzu;
4. inline-block: Zeigt das Element als Inline-Block-Container an;
5. bg-gray-200: Setzt die Hintergrundfarbe auf ein helles Grau;
6. rounded-full: Wendet vollständig abgerundete Ecken auf das Element an;
7. px-3: Fügt horizontalen Abstand von 0.75rem (12px) sowohl links als auch rechts hinzu;
8. py-1: Fügt vertikalen Abstand von 0.25rem (4px) sowohl oben als auch unten hinzu;
9. text-sm: Setzt die Schriftgröße auf klein (0.875rem oder 14px);
10. font-semibold: Wendet eine halbfette Schriftstärke an;
11. text-gray-700: Setzt die Textfarbe auf ein mittleres Grau;
12. mr-2: Fügt einen rechten Rand von 0.5rem (8px) hinzu;
13. mb-2: Fügt einen unteren Rand von 0.5rem (8px) hinzu.

Hinweis

Alle detaillierten Informationen über die Card-Komponente finden Sie hier.