View on GitHub

Stat cards

Use stat cards to easily display large numbers, great for any kind of simple metrics and dashboard content.

On this page

Examples

12,938

Page views

758

Downloads

1,293

Sign-ups

html

<div class="statcard p-3">
  <h3 class="statcard-number">12,938</h3>
  <span class="statcard-desc">Page views</span>
</div>
<div class="statcard p-3 text-center">
  <h3 class="statcard-number">758</h3>
  <span class="statcard-desc">Downloads</span>
</div>
<div class="statcard p-3 text-end">
  <h3 class="statcard-number">1,293</h3>
  <span class="statcard-desc">Sign-ups</span>
</div>

Carets

12,938 5%

Page views

758 1.3%

Downloads

html

<div class="statcard p-3">
  <h3 class="statcard-number">
    12,938
    <small class="delta-indicator delta-positive">5%</small>
  </h3>
  <span class="statcard-desc">Page views</span>
</div>
<div class="statcard p-3">
  <h3 class="statcard-number">
    758
    <small class="delta-indicator delta-negative">1.3%</small>
  </h3>
  <span class="statcard-desc">Downloads</span>
</div>

Background variations

12,938 5%

Page views

758 1.3%

Downloads

758 1.3%

Downloads

1,293 6.75%

Sign-ups

1,293 6.75%

Sign-ups

html

<div class="statcard statcard-primary p-4 mb-2">
  <h3 class="statcard-number">
    12,938
    <small class="delta-indicator delta-positive">5%</small>
  </h3>
  <span class="statcard-desc">Page views</span>
</div>
<div class="statcard statcard-success p-4 mb-2">
  <h3 class="statcard-number">
    758
    <small class="delta-indicator delta-negative">1.3%</small>
  </h3>
  <span class="statcard-desc">Downloads</span>
</div>
<div class="statcard statcard-info p-4 mb-2">
  <h3 class="statcard-number">
    758
    <small class="delta-indicator delta-negative">1.3%</small>
  </h3>
  <span class="statcard-desc">Downloads</span>
</div>
<div class="statcard statcard-danger p-4 mb-2">
  <h3 class="statcard-number">
    1,293
    <small class="delta-indicator delta-positive">6.75%</small>
  </h3>
  <span class="statcard-desc">Sign-ups</span>
</div>
<div class="statcard statcard-warning p-4 mb-2">
  <h3 class="statcard-number">
    1,293
    <small class="delta-indicator delta-positive">6.75%</small>
  </h3>
  <span class="statcard-desc">Sign-ups</span>
</div>

And use the grid system to size and align them.

12,938 5%

Page views

758 1.3%

Downloads

html

<div class="row">
  <div class="col-sm-6">
    <div class="statcard statcard-primary p-4">
      <h3 class="statcard-number">
        12,938
        <small class="delta-indicator delta-positive">5%</small>
      </h3>
      <span class="statcard-desc">Page views</span>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="statcard statcard-success p-4">
      <h3 class="statcard-number">
        758
        <small class="delta-indicator delta-negative">1.3%</small>
      </h3>
      <span class="statcard-desc">Downloads</span>
    </div>
  </div>
</div>

CSS

Sass variables

$statcard-border-radius:                $border-radius-sm;

$statcard-desc-color:                   lighten($gray-700, 20%);
$statcard-desc-color-alt:               rgba($white, .65);
$statcard-desc-text-transform:          uppercase;

$statcard-delta-indicator-padding:      .4rem;
$statcard-delta-indicator-font-size:    $font-size-base * .8;
$statcard-delta-indicator-margin-x:     $spacer * .1;
$statcard-delta-indicator-border-width: $border-width * 4;

$statcard-hr-margin-x:                  -1rem;
$statcard-hr-border-color:              rgba($white, .2);