Card
Container-Komponente in vier Varianten. Unterstützt Header, Body, Footer, Bild, Icon, Title/Subtitle und optionales Click-Event.
Varianten
Filled
Filled
Standard-Variante mit Schatten
Das ist der Body-Bereich. Hier kommt der Hauptinhalt der Card hinein.
Outlined
Outlined
Rahmen ohne Schatten
Das ist der Body-Bereich. Hier kommt der Hauptinhalt der Card hinein.
Flat
Flat
Kein Rahmen, kein Schatten
Das ist der Body-Bereich. Hier kommt der Hauptinhalt der Card hinein.
Ghost
Ghost
Transparenter Hintergrund
Das ist der Body-Bereich. Hier kommt der Hauptinhalt der Card hinein.
Border-Radius
Stufen
None
Content
Sm
Content
Md
Content
Lg
Content
Xl
Content
Full
Content
Header-Bereiche
Nur Title
Nur Titel
Keine Subtitle, kein Icon.
Title + Extra
Offene Rechnungen
12
Drei Rechnungen sind überfällig.
Ohne Header
Kein Header – nur Body.
Mit Footer
Footer
Bestellung #1042
In Bearbeitung
Lieferadresse: Musterstraße 1, 1010 Wien
Mit Bild
Image oben
Naturpark
Tirol, Österreich
Wunderschöne Berglandschaft zum Wandern und Erholen.
Klickbare Card
Mit Click
Klickbar
Hover zeigt Effekt
Klick mich!
Outlined klickbar
Auch als Outlined möglich.
Kennzahl-Kacheln (KPI)
KPI-Grid
Aktive Benutzer
1.284
Offene Rechnungen
12
Abgeschlossene Aufgaben
97%
class & style
class
Mit class
Diese Card hat class="demo-custom-class".
style
Mit style
Diese Card hat einen custom style.