Stat 1.2.2

Display key metrics at a glance with labels, values, change indicators, and layout variants. Deutsch: Statistik

Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.

When to use

KPI / metric presentation with .velin-stat (label, value, optional hint).
Dashboard summaries where a single number needs clear hierarchy.

When not

Animated count-up effects — use Counter.
Trend sparklines — use Sparkline beside or instead of a static stat.

Basic stat

Revenue $34,500

Users 1,240

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

Change indicator

Add .velin-stat-change with .up or .down to show trend direction.

Sales $12,800 +12.5%

Bounce Rate 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

Add .velin-stat-horizontal for a side-by-side layout.

<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>

Compact

Use .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>

Keep the metric label visible in text; do not rely on colour alone for up/down meaning.
If the value updates live, consider pairing with Announcer for AT users.