Metrik-Karte — component.metric-card

Componentv1.1.0Statusweb.applicationdesktop.shellbuilder.preview

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
`label *`	string	`—`
`value *`	string	`—`
`delta`	string	`""`
`direction`	string: up \| down \| neutral	`"up"`
`comparison`	string	`""`
`spacing`	string: default \| none \| sm \| md \| lg \| xl	`"default"`

Stellschrauben (Komponenten-Tokens)

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.hairline color.border.default color.status.danger color.status.danger-surface color.status.success color.status.success-surface color.surface.default color.surface.sunken color.text.default color.text.muted elevation.control font.family.default font.family.display leading.tight radius.full radius.surface size.05 size.12 size.2 size.4 size.5 size.6 size.8 text.3xl text.sm weight.medium weight.semibold