New

Stats cards

Stat cards are a new component for showing values and their relative change. Useful for reports or dashboards.

They are full width by default. You can use the sizing properties or the grid system to set their dimensions.

Examples

2,562 -17%

Sign-ups

7,910 6.5%

Total orders

$132,938 32%

Total earnings

1,608 7.2%

New visits

$129.00 -3.2%

Average order value

64% 2.2%

Return customer rate
<div class="statcard statcard-light">
  <h2 class="statcard-value">
    2,562
    <span class="statcard-change statcard-change-negative">-17%</span>
  </h2>
  <span class="statcard-label">Sign-ups</span>
</div>

<div class="statcard statcard-info">
  <h2 class="statcard-value">
    7,910
    <span class="statcard-change statcard-change-positive">6.5%</span>
  </h2>
  <span class="statcard-label">Total orders</span>
</div>

<div class="statcard statcard-secondary">
  <h2 class="statcard-value">
    $122,938
    <span class="statcard-change statcard-change-positive">32%</span>
  </h2>
  <span class="statcard-label">Total earnings</span>
</div>

<div class="statcard statcard-warning">
  <h2 class="statcard-value">
    1,608
    <span class="statcard-change statcard-change-positive">7.2%</span>
  </h2>
  <span class="statcard-label">New visits</span>
</div>

<div class="statcard statcard-sky">
  <h2 class="statcard-value">
    $129.00
    <span class="statcard-change statcard-change-negative">-3.2%</span>
  </h2>
  <span class="statcard-label">Average order value</span>
</div>

<div class="statcard statcard-pistachio">
  <h2 class="statcard-value">
    64%
    <span class="statcard-change statcard-change-positive">2.2%</span>
  </h2>
  <span class="statcard-label">Return customer rate</span>
</div>
Examples without context backgrounds

$12,938 3.5%

Total earnings

1,256 -17%

Sign-ups

3,201 7.2%

New orders
<div class="statcard border-right pr-5 mr-5">
  <h3 class="statcard-value">
    $12,938
    <span class="statcard-change statcard-change-positive">3.5%</span>
  </h3>
  <span class="statcard-label">Total earnings</span>
</div>

<div class="statcard border-right pr-5 mr-5">
  <h3 class="statcard-value">
    1,256
    <span class="statcard-change statcard-change-negative">-17%</span>
  </h3>
  <span class="statcard-label">Sign-ups</span>
</div>

<div class="statcard">
  <h3 class="statcard-value">
    3,201
    <span class="statcard-change statcard-change-positive">7.2%</span>
  </h3>
  <span class="statcard-label">New orders</span>
</div>