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% ionicons-v5-c

Sign-ups

7,910 -6.5% ionicons-v5-c

Total orders

$132,938 32% ionicons-v5-c

Total earnings

1,608 7.2% ionicons-v5-c

New visits

$129.00 -3.2% ionicons-v5-c

Average order value

64% 2.2% ionicons-v5-c

Return customer rate
<div class="statcard statcard-light">
  <h2 class="statcard-value">
    2,562
    <span class="statcard-change text-danger">-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 text-success">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 text-success">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 text-success">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 text-danger">-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 text-success">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 pe-5 me-5">
  <h3 class="statcard-value">
    $12,938
    <span class="statcard-change text-success">3.5%</span>
  </h3>
  <span class="statcard-label">Total earnings</span>
</div>

<div class="statcard pe-5 me-5">
  <h3 class="statcard-value">
    1,256
    <span class="statcard-change text-danger">-17%</span>
  </h3>
  <span class="statcard-label">Sign-ups</span>
</div>

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