Components

Stat tiles

Big-number KPI tiles for dashboards — a felt-css extra, not part of Bootstrap.

On this page

Example#

A stat tile is a card whose body carries .stat: a small uppercase .stat-label above a big .stat-value. Values use tabular figures, so numbers that update in place don't jitter. Color the card with a .text-bg-* helper and lay the tiles out with the grid.

Solar 1.2 kW

Consumption 380 W

Battery 82 %

Outside 14 °C

<div class="row row-cols-2 row-cols-lg-4 g-3">
  <div class="col">
    <div class="card text-bg-warning">
      <div class="card-body stat">
        <span class="stat-label">Solar</span>
        <span class="stat-value">1.2 kW</span>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card text-bg-primary">
      <div class="card-body stat">
        <span class="stat-label">Consumption</span>
        <span class="stat-value">380 W</span>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card text-bg-success">
      <div class="card-body stat">
        <span class="stat-label">Battery</span>
        <span class="stat-value">82 %</span>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card text-bg-danger">
      <div class="card-body stat">
        <span class="stat-label">Outside</span>
        <span class="stat-value">14 °C</span>
      </div>
    </div>
  </div>
</div>

In felt, a colored tile is a patch: saturated felt with a soft cut edge and a cast shadow, sewn on with thread a shade lighter than the patch.

Colors#

Every .text-bg-* color works, and so does a plain card for a quieter tile.

Default 42

Primary 42

Secondary 42

Success 42

Danger 42

Warning 42

Info 42

Light 42

Dark 42

<div class="row row-cols-2 row-cols-md-3 g-3">
  <div class="col">
    <div class="card">
      <div class="card-body stat">
        <span class="stat-label">Default</span>
        <span class="stat-value">42</span>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card text-bg-primary">
      <div class="card-body stat">
        <span class="stat-label">Primary</span>
        <span class="stat-value">42</span>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card text-bg-secondary">
      <div class="card-body stat">
        <span class="stat-label">Secondary</span>
        <span class="stat-value">42</span>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card text-bg-success">
      <div class="card-body stat">
        <span class="stat-label">Success</span>
        <span class="stat-value">42</span>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card text-bg-danger">
      <div class="card-body stat">
        <span class="stat-label">Danger</span>
        <span class="stat-value">42</span>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card text-bg-warning">
      <div class="card-body stat">
        <span class="stat-label">Warning</span>
        <span class="stat-value">42</span>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card text-bg-info">
      <div class="card-body stat">
        <span class="stat-label">Info</span>
        <span class="stat-value">42</span>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card text-bg-light">
      <div class="card-body stat">
        <span class="stat-label">Light</span>
        <span class="stat-value">42</span>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card text-bg-dark">
      <div class="card-body stat">
        <span class="stat-label">Dark</span>
        <span class="stat-value">42</span>
      </div>
    </div>
  </div>
</div>

Sizing#

The value is 1.75rem by default. On small tiles, such as two to a row on a phone, scale it down with a font size utility like .fs-4.

Solar 1,240 W

Consumption 380 W

<div class="row row-cols-2 g-2" style="max-width: 22rem">
  <div class="col">
    <div class="card text-bg-warning">
      <div class="card-body stat">
        <span class="stat-label">Solar</span>
        <span class="stat-value fs-4">1,240 W</span>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card text-bg-primary">
      <div class="card-body stat">
        <span class="stat-label">Consumption</span>
        <span class="stat-value fs-4">380 W</span>
      </div>
    </div>
  </div>
</div>

Semantic markup#

.stat, .stat-label and .stat-value reset their margins, so they work on any element. A description list ties each label to its value for assistive technologies, and extra lines like a trend fit underneath.

Balance: +42.10 €; since last settlement

<div class="card text-bg-success" style="max-width: 16rem">
  <dl class="card-body stat">
    <dt class="stat-label">Balance</dt>
    <dd class="stat-value">+42.10 €</dd>
    <dd class="small mb-0">since last settlement</dd>
  </dl>
</div>