Card
Inhaltskarte mit Media-, Inhalts- und Footer-Slot
Beispiele
Karte mit Elements in Slots
Kundenprofil
Zusammengesetzt aus ui.heading, ui.text, ui.badge und ui.button — jede Zeile ein eigener Render-Aufruf über die Registry.
Interaktiv, ohne Footer
Hover-Karte
Elevation wechselt beim Hover über Token.
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| padded | boolean | true | Innenabstand |
| interactive | boolean | false | Interaktiv (Hover) |
| background | string | "" | Hintergrund-Token |
| href | string | "" | Klick-Ziel (macht die ganze Karte zum Link) |
| hrefLabel | string | "" | Link-Beschriftung für Screenreader |
* Pflicht-Prop
Events & Slots
Slot media:
akzeptiert ui.*
Slot default:
akzeptiert ui.*, component.*, layout.*
Slot footer:
akzeptiert ui.*
Stellschrauben (Komponenten-Tokens)
Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.
| Token | Default |
|---|---|
--card-background | var(--color-surface-raised) |
--card-border | var(--color-border-default) |
--card-radius | var(--radius-surface) |
--card-shadow | var(--elevation-raised) |
--card-padding | var(--size-5) |
Genutzte Design-Tokens
border.hairlinecolor.border.defaultcolor.surface.defaultcolor.surface.raisedcolor.surface.sunkencolor.text.defaultduration.baseeasing.standardelevation.overlayelevation.raisedfont.family.defaultradius.surfacesize.3size.5