Card

Kartenfläche mit Kopf, Titel, Beschreibung, Aktion rechts oben, Inhalt und Fußzeile. Die Varianten elevated, outline und tint ändern nur Fläche, Rahmen und Schatten; interactive hebt die Karte beim Hover an und macht sie über render zu einem Link mit Fokusring.

Varianten

elevated ist die weiße Standardkarte mit weichem Schatten, outline tauscht den Schatten gegen eine feine Innenkante, tint färbt Fläche und Text.

Erhöht

Ohne Rahmen, mit weichem Schatten

Die Standardkarte für Dashboard und Übersichten.

Umrandet

1,5-px-Innenkante statt Schatten

Für dichte Raster, in denen Schatten zu unruhig wären.

Getönt

Zarte Fläche mit eigener Textfarbe

Ideal für Status, Hinweise und KPI-Kacheln.

KPI-Kacheln

Die vier Tints aus Richtung v3: Orange, Blau, Grün und Violett, jeweils mit einer Textfarbe, die AA erfüllt. Zahlen stehen tabellarisch.

Umsatz

128.400 €

+12,4 %

Bestellungen

1.284

+4,1 %

Kundschaft

8.902

+2,8 %

Churn

1,2 %

−0,4 %

Interaktiv als Link

Mit interactive hebt sich die Karte beim Hover an (shadow-lift, -translate-y-0.5) und erbt den Fokusring der Control-Basis. Über render wird daraus ein echtes a-Element.

Bericht öffnen

Die ganze Karte ist ein Link

Fokusring, Druck-Feedback und Touch-Mindestfläche kommen unverändert aus der gemeinsamen Control-Basis.

Playground

Variante, Tint und Interaktion frei kombinieren. Die interaktive Variante wird als Link gerendert.

Variante

Tint

Interaktiv

Monatsbericht

Alle Kennzahlen im Überblick

Die Karte bündelt Titel, Beschreibung und eine Aktion rechts oben; der Inhalt bleibt frei gestaltbar.

Öffnen →