Statistik 1.2.0

Zeige wichtige Kennzahlen auf einen Blick mit Labels, Werten, Änderungsindikatoren und Layoutvarianten. English: Statistik

Reifegrad: Dokumentiert als stabil in VelinStyle 1.2.0. Design Intelligence (Plan / Review / Agent-Meta) ist separat und Beta / Foundation wo vermerkt.

Wann verwenden

KPI-/Metrik-Darstellung mit .velin-stat (Label, Wert, optionaler Hinweis).
Dashboard-Zusammenfassungen, bei denen eine einzelne Zahl klare Hierarchie braucht.

Wann nicht

Animated count-up effects — use Counter.
Trend sparklines — use Sparkline neben oder statt einer statischen Statistik.

Basis-Statistik

Umsatz $34,500

Nutzer 1,240

<div class="velin-stat">
  <span class="velin-stat-label">Revenue</span>
  <span class="velin-stat-value">$34,500</span>
</div>

Änderungsindikator

Füge .velin-stat-change mit .up oder .down um die Trendrichtung zu zeigen.

Verkäufe $12,800 +12.5%

Absprungrate 42% -3.2%

<div class="velin-stat">
  <span class="velin-stat-label">Sales</span>
  <span class="velin-stat-value">$12,800</span>
  <span class="velin-stat-change up">+12.5%</span>
</div>

<div class="velin-stat">
  <span class="velin-stat-label">Bounce Rate</span>
  <span class="velin-stat-value">42%</span>
  <span class="velin-stat-change down">-3.2%</span>
</div>

Horizontal

Füge .velin-stat-horizontal für ein Layout nebeneinander.

<div class="velin-stat velin-stat-horizontal">
  <span class="velin-stat-label">Active Users</span>
  <span class="velin-stat-value">8,420</span>
  <span class="velin-stat-change up">+5%</span>
</div>

Kompakt

Nutze .velin-stat-compact for tighter spacing — ideal for dashboard grids.

<div class="velin-stat velin-stat-compact">
  <span class="velin-stat-label">Orders</span>
  <span class="velin-stat-value">312</span>
</div>

Halte das Metrik-Label sichtbar; verlasse dich für Auf/Ab-Bedeutung nicht nur auf Farbe.
Wenn der Wert live aktualisiert wird, erwäge die Kombination mit Announcer für AT-Nutzer.