Metrik-Karte

Dashboard-Kennzahl (Untitled-UI-Muster): Label, großer Wert, Delta-Badge mit Richtung (steigend grün / fallend rot), Vergleichstext

Im Builder nutzen

Nutzt: ui.icon

Beispiele

Steigend

Umsatz (30 Tage)48.560 €↑ 12 %vs. Vormonat

Fallend

Retourenquote4,2 %↓ 0,8 %vs. Vormonat

Ohne Delta

Offene Aufträge12

Eigenschaften

Prop	Typ	Default	Builder-Label
label *	string	—	Label
value *	string	—	Wert (formatiert)
delta	string	""	Delta (z.B. 12 %)
direction	string: up | down | neutral	"up"	Richtung
comparison	string	""	Vergleichstext (vs. Vormonat)
spacing	string: default | none | sm | md | lg | xl	"default"	Eigenabstand

* Pflicht-Prop

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
--metric-card-border-default	var(--color-border-default)
--metric-card-elevation-control	var(--elevation-control)
--metric-card-radius-full	var(--radius-full)
--metric-card-radius-surface	var(--radius-surface)
--metric-card-status-danger	var(--color-status-danger)
--metric-card-status-danger-surface	var(--color-status-danger-surface)
--metric-card-status-success	var(--color-status-success)
--metric-card-status-success-surface	var(--color-status-success-surface)
--metric-card-surface-default	var(--color-surface-default)
--metric-card-surface-sunken	var(--color-surface-sunken)
--metric-card-text-default	var(--color-text-default)
--metric-card-text-muted	var(--color-text-muted)

Genutzte Design-Tokens

border.hairlinecolor.border.defaultcolor.status.dangercolor.status.danger-surfacecolor.status.successcolor.status.success-surfacecolor.surface.defaultcolor.surface.sunkencolor.text.defaultcolor.text.mutedelevation.controlfont.family.defaultfont.family.displayleading.tightradius.fullradius.surfacesize.05size.12size.2size.4size.5size.6size.8text.3xltext.smweight.mediumweight.semibold