Statistic

Stats are mini-cards that be used for displaying numerical values.

Basic Stat

When using multiple stats, wrap in a .stats container to avoid floating issues.

2,300
users
£100k
revenue
<div class="stat card">
  <div class="value">2,300</div>
  <div class="label">users</div>
</div>

<div class="stat card">
  <div class="value">£100k</div>
  <div class="label">revenue</div>
</div>

Stat with icon

2,300
sales
<div class="stat card">
  <i class="ico ico-dark ico-chartup"></i>
  <div class="content">
    <div class="value">2,300</div>
    <div class="label">sales</div>
  </div>
</div>

Stat with up/down change

2,300
users
5%
£100k
revenue
2%
<div class="stat card">
 <div class="value">2,300</div>
 <div class="label">users</div>
 <div class="change up">5%</div>
</div>

<div class="stat card">
 <div class="value">£100k</div>
 <div class="label">revenue</div>
 <div class="change down">2%</div>
</div>