Stat

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

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>