Stat

Stats display a key metric with a label and optional supporting value.

Usage

Wrap one or more .Stat elements in a .StatsGroup container.

<div class="StatsGroup">
  <div class="Stat success">
    <span class="Stat-Label">Cases Resolved</span>
    <span class="Stat-Value">142</span>
    <span class="Stat-Sub">+12 this week</span>
  </div>
  <div class="Stat danger">
    <span class="Stat-Label">Open Issues</span>
    <span class="Stat-Value">8</span>
  </div>
</div>

Variants

Apply a semantic or brand variant directly on .Stat:

• success, danger, warning, info
• primary, accent, neutral

Example

Compact Group

Add .compact to .StatsGroup for a denser layout.

<div class="StatsGroup compact">…</div>

Spanning

Control how much width a stat occupies in the group:

• .half: Takes up half the available width.
• .double: Takes up twice the standard width.

<div class="Stat success double">…</div>
<div class="Stat info half">…</div>

Stat as a Link

Render .Stat as an <a> for clickable stat cards.

<a href="/cases" class="Stat success">
  <span class="Stat-Label">Resolved</span>
  <span class="Stat-Value">142</span>
</a>

Structure

• .Stat-Label: Descriptive label shown above the value.
• .Stat-Value: The primary metric displayed prominently.
• .Stat-Sub: Secondary or supporting context below the value.