Caster — Stat block

Single stat

The atomic unit. Big number on top, label below.

47

Saved parts

<div class="stat-item">
  <div class="stat-item__value">47</div>
  <div class="stat-item__label">Saved parts</div>
</div>

Stats bar — grouped

Multiple stats inline, divided by hairlines, wrapped in a bordered surface. The stats-bar flexes equally — each child stretches to flex: 1.

4

Registered machines

12

Open orders

$8,471

YTD spend

2

Service overdue

<div class="stats-bar">
  <div class="stat-item">
    <div class="stat-item__value">4</div>
    <div class="stat-item__label">Registered machines</div>
  </div>
  <div class="stat-item">
    <div class="stat-item__value">12</div>
    <div class="stat-item__label">Open orders</div>
  </div>
  ...
</div>

With trend indicator

Optional .stat-item__trend below the label shows period-over-period change. .up is green; .down is red. Don't auto-color "up = good" — for cost or downtime metrics, up is bad. Match the color to the meaning, not the direction.

3,221

Search sessions

+12.4%

37%

Mobile traffic

+3.1pts

25.6%

Quick-back rate

−1.8pts

9.8×

Search : browse ratio

Up from 7.2×

<div class="stat-item">
  <div class="stat-item__value">3,221</div>
  <div class="stat-item__label">Search sessions</div>
  <div class="stat-item__trend up">
    <svg width="10" height="10">...</svg> +12.4%
  </div>
</div>

Inverted (over dark surface)

The component is surface-agnostic — drop it on any background. Over the brand-deep surface, set the value/label colors via inline style or a wrapping class.

10,030

Sessions

7,014

Unique users

4.14

Pages / session

32.1%

Search rate

<!-- Inverted via scoped CSS variable overrides -->
<div style="--caster-color-text-default: #fff;
            --caster-color-text-muted: rgba(255,255,255,0.5);">
  <div class="stat-item">...</div>
</div>

Tokens consumed

Slot	Token
Value font size	--caster-font-size-xl (24px)
Value color	--caster-color-text-default
Label font size	--caster-font-size-3xs (10px)
Label color	--caster-color-text-muted
Label letter-spacing	--caster-letter-spacing-wider
Trend up color	--caster-color-feedback-success-text
Trend down color	--caster-color-feedback-error-text
Stats-bar border	--caster-color-border-default
Stats-bar divider	--caster-color-border-subtle
Stats-bar radius	--caster-radius-card