Design System
Playground Zur Vorlage

Komponenten · KartenStat-Card

Komponente · 6 Varianten

Stat-Card

components/StatCard.astro

Proof-Paar mit Label; Trend als Pfeil-Zeichen in Mono, nie farbig; Karte, Zeile, Vorher/Nachher.

Notizen

  • Bestand: Proof-Paar und Stats-Band, kein Trend, keine Einzelkarte.
  • Trend ohne Rot/Grün: Pfeil und Zahl in Granit, Screenreader-Text.

Props

Name Typ Default Notiz
variant "zahl" | "trend-auf" | "trend-ab" | "karte" | "zeile" | "vergleich" "zahl" 01–06.
surface "nacht" | "paper" "nacht" Pflicht-Paar.
<StatCard variant="zahl" surface="nacht" />

01 · Zahl

Proof-Paar, Label

Stats-Band. Basis.

Nacht

14 Tage

bis Abnahme

Paper

14 Tage

bis Abnahme

02 · Trend auf

↑ +3

Anfrage. Mono, gedimmt.

Nacht

14 Tage

bis Abnahme

+3 gegen Vorjahr gestiegen

Paper

14 Tage

bis Abnahme

+3 gegen Vorjahr gestiegen

03 · Trend ab

↓ −2

Anfrage. Kein Rot.

Nacht

14 Tage

bis Abnahme

−2 gegen Vorjahr gesunken

Paper

14 Tage

bis Abnahme

−2 gegen Vorjahr gesunken

04 · Karte

Im Fond

Karten. p-8.

Nacht

14 Tage

bis Abnahme

Paper

14 Tage

bis Abnahme

05 · Zeile

Zahl links, Label rechts

Tabellen. Haarlinie unten.

Nacht

14 Tage

bis Abnahme

Paper

14 Tage

bis Abnahme

06 · Vergleich

Vorher / Nachher

Case-Study. Zwei Paare.

Nacht

Vorher

92 Tage

Nachher

14 Tage

Paper

Vorher

92 Tage

Nachher

14 Tage