Card-Komponente mit CSS Custom Properties

Eine Card-Komponente ist ein eigenständiger Container für Inhalte. Die Designziele sind konsistente Innenabstände mit Spacing-Tokens, anpassbare Farben mit Alias-Tokens, responsive Größenanpassung ohne JS sowie Unterstützung von Varianten (elevated, outlined, flat) durch CSS-Custom-Properties.

Verwenden Sie eine einzelne Klasse .card mit CSS-Custom-Properties für konfigurierbare Werte. Interne Elemente (Header, Body, Footer) übernehmen Werte aus dem Gültigkeitsbereich der Card. Dadurch wird verhindert, dass die Stile von Card-Instanzen in der Codebasis auseinanderlaufen.

Überschreiben Sie die Custom Properties auf Card-Ebene mit Variantenklassen, anstatt separate Regelsätze zu schreiben. Variantenklassen müssen nur geänderte Variablen neu definieren – unveränderte Eigenschaften übernehmen automatisch die Basiswerte, ohne dass sie wiederholt werden müssen.

Wenn eine Theme-Klasse eines übergeordneten Elements --color-surface ändert, aktualisieren alle Cards innerhalb dieses Themes automatisch ihren Hintergrund. Es ist kein Card-spezifischer Code zum Überschreiben des Themes erforderlich – das Alias-Token-System erledigt dies transparent.

Verwenden Sie clamp() mit Überschreibungen für benutzerdefinierte Eigenschaften, um einen dynamischen Innenabstand zu erzielen: --card-padding: clamp(1rem, 4vw, 2rem). Bei größeren Viewports wird der Innenabstand großzügiger, bei kleinen Viewports minimal – alles wird über eine einzige Token-Definition gesteuert.

Ein Kartenraster mit CSS Grid, auto-fill und minmax erzeugt ein sich selbst organisierendes Layout: grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)). Die Karten füllen den verfügbaren Platz und umbrechen automatisch, ohne Breakpoints in Media Queries.

Halten Sie die Seitenverhältnisse von Kartenbildern mit aspect-ratio: 16/9 am Bildcontainer konsistent. Die Bilder füllen den Container mit object-fit: cover, sodass die Karten unabhängig von den Abmessungen des Quellbilds gleich hoch bleiben.

Fügen Sie Hover- und focus-within-Zustände hinzu, die die Karte leicht hervorheben: transform: translateY(-2px) und einen verstärkten box-shadow. Animieren Sie dies mit transition: transform 200ms ease, box-shadow 200ms ease, um eine flüssige und für den Compositor geeignete Interaktionsrückmeldung zu erzielen.

Machen Sie die gesamte Karte mit einem ausgedehnten Link anklickbar: Positionieren Sie die Karte relativ und den Hauptlink absolut mit inset: 0. Screenreader lesen den Linktext vor; das Overlay bedeckt die Karte für Mausbenutzer visuell.

Fügen Sie eine Variante .card--loading hinzu, die den Inhalt durch einen Skeleton-Schimmereffekt mit CSS-Animation ersetzt: background: linear-gradient(90deg, var(--color-skeleton-from), var(--color-skeleton-to)), animiert mit background-size: 200% und animation: shimmer 1.5s infinite.

Im Dark Mode wechselt das Token --color-surface automatisch von hell zu dunkel. Wenn sich die Tiefenwirkung hervorgehobener Karten auf box-shadow stützt, der auf dunklen Hintergründen kaum sichtbar ist, fügen Sie einen dezenten Rahmen hinzu oder erhöhen Sie den Kontrast der Oberflächenfarbe, damit die Hervorhebung im Dark Mode wahrnehmbar bleibt.

Wie ermöglichen benutzerdefinierte CSS-Eigenschaften Kartenvarianten, ohne das vollständige Regelwerk zu duplizieren?

Das Erstellen einer Kartenkomponente mit benutzerdefinierten CSS-Eigenschaften ergibt ein flexibles, themenfähiges und variantenbewusstes UI-Grundelement. Basisvariablen legen Standardwerte fest, Variantenklassen überschreiben gezielt einzelne Werte und Themenklassen überschreiben sie global. In Kombination mit responsiver Größenanpassung, barrierefreien Links und Ladezuständen lässt sich dieses Muster sauber in Designsystemen skalieren.