Karten - AK Design System

Flexible und erweiterbare Inhaltscontainer zur Darstellung von Daten, Bildern und Aktionen.

Basis-Karten

Standard-Karten mit Kopf-, Haupt- und Fußbereich.

Eine einfache Karte nur mit Inhalt.

Dies ist der Hauptinhaltsbereich der Karte. Er ermöglicht eine flexible Platzierung von Inhalten.

Optionaler Beschreibungstext.

Diese Karte verfügt über einen eigenen Kopf- und Fußbereich, ideal für strukturierte Inhalte.

Verschiedene Stile für unterschiedliche Kontexte.

Verwenden Sie .ak-card-flat für ein randloses, schattenfreies Aussehen, oft auf farbigen Hintergründen.

Verwenden Sie .ak-card-elevated, um der Karte mehr Tiefe mit einem stärkeren Schatten zu verleihen.

Verwenden Sie .ak-card-compact für reduzierten Innenabstand, geeignet für dichte Datenanzeigen.

Zeitgemäße Stile inklusive Glassmorphismus, Verläufen und erweiterten Hover-Effekten.

Verwenden Sie .ak-card-glass für eine moderne Milchglas-Ästhetik. Wirkt am besten auf komplexen Hintergründen.

Lebhafter Hintergrund

Verwenden Sie .ak-card-gradient-primary für hervorgehobene Karten, die auffallen sollen.

1.234

Benutzer Gesamt

Verwenden Sie .ak-card-horizontal für listenartige Darstellungen. Das Bild sitzt links vom Inhalt.

Verwenden Sie .ak-card-hover-lift, um die Karte beim Hover sanft anzuheben.

Verwenden Sie .ak-card-hover-border, um die Randfarbe beim Hover hervorzuheben.

Verwenden Sie .ak-card-hover-glow, um beim Hover ein subtiles Leuchten um die Karte hinzuzufügen.

Karten, die auf Benutzerinteraktion reagieren.

Verwenden Sie .ak-card-interactive, um Hover-Effekte hinzuzufügen und Klickbarkeit anzuzeigen.

Perfekt für die Verwendung von Karten als Navigationslinks oder aktionierbare Elemente.

Karten mit integrierten Medien.

Bilder, die als erstes Kind von .ak-card platziert werden, erhalten automatisch abgerundete obere Ecken.

Sie können Bilder auch innerhalb des Inhaltsbereichs platzieren.