Stats cards

Default stat card

$12,938 3.5%

Total earnings

256 17%

Sign-ups

3,201 7.2%

New orders 

<div class="statcard p-3">
  <h3 class="statcard-number">
    $12,938
    <small class="stat-indicator indicator-positive">3%</small>
  </h3>
  <span class="statcard-desc">Total earnings</span>
</div>
<div class="statcard p-3">
  <h3 class="statcard-number">
    256
    <small class="stat-indicator indicator-negative">17%</small>
  </h3>
  <span class="statcard-desc">Sign-ups</span>
</div>
<div class="statcard p-3">
  <h3 class="statcard-number">
    3,201
    <small class="stat-indicator indicator-positive">7%</small>
  </h3>
  <span class="statcard-desc">New orders</span>
</div>

Context backgrounds

2,562 17%

Sign-ups

$12,938 3.5%

Total earnings

$12,938 32%

Total earnings

7,802 8.7%

Page views

608 7.2%

New visits 

<div class="statcard statcard-primary p-4">
  <h2 class="statcard-number">
    2,562
    <small class="stat-indicator indicator-negative">17%</small>
  </h2>
  <span class="statcard-desc">Sign-ups</span>
</div>
<div class="statcard statcard-success p-4">
  <h2 class="statcard-number">
    $12,938
    <small class="stat-indicator indicator-positive">3%</small>
  </h2>
  <span class="statcard-desc">Total earnings</span>
</div>
<div class="statcard statcard-inverse p-4">
  <h2 class="statcard-number">
    $12,938
    <small class="stat-indicator indicator-positive">3%</small>
  </h2>
  <span class="statcard-desc">Total earnings</span>
</div>
<div class="statcard statcard-danger p-4">
  <h2 class="statcard-number">
    7,802
    <small class="stat-indicator indicator-negative">7%</small>
  </h2>
  <span class="statcard-desc">Page views</span>
</div>
<div class="statcard statcard-warning p-4">
  <h2 class="statcard-number">
    608
    <small class="stat-indicator indicator-positive">7%</small>
  </h2>
  <span class="statcard-desc">New visits</span>
</div>

Inside a grid system

2,562 17%

Sign-ups

$12,938 3.5%

Total earnings 

<div class="row">
  <div class="col-md-6">
    <div class="statcard statcard-primary p-4">
      <h2 class="statcard-number">
        2,562
        <small class="stat-indicator indicator-negative">17%</small>
      </h2>
      <span class="statcard-desc">Sign-ups</span>
    </div>
  </div>
  <div class="col-md-6">
    <div class="statcard statcard-success p-4">
      <h2 class="statcard-number">
        $12,938
        <small class="stat-indicator indicator-positive">3.5%</small>
      </h2>
      <span class="statcard-desc">Total earnings</span>
    </div>
  </div>
</div>