Version 3.0.6

Stat Board

Stat boards are used to highlight key metrics to a user. They are often used on dashboards to highlight top metrics that determine progress, and/or progress to goal. Stat boards support displaying data from a single day, across multiple days (e.g Last 30 days) or comparative stats between two different time periods. In the future, we will support allowing the user to dynamically change the data displayed within the stat board.

We support set widths for .stat-board-three, .stat-board-four, .stat-board-five, and .stat-board-six stats. If you want each stat to be dynamic width (based on the content within), see below for default spacing.

  • $1.5k
    Stat 1 Title
  • 5.6%
    Stat 2 Title
  • 7,367
    Stat 3 Title
  • 9.9k
    Stat 4 Title
  • 922.9k
    Stat 5 Title
  • 431.4k
    Stat 6 Title
  • 3/29/2017
    Stat 7 Title
  • 54
    Stat 8 Title
                      
<ul class="stat-board stat-board-four">
<li class="stat-item">
<div class="stat-info">
<div class="stat-data">$5.1k</div>
<div class="stat-title">Stat 1 Title</div>
</div>
</li>
<li class="stat-item">
<div class="stat-info">
<div class="stat-data">5.6%</div>
<div class="stat-title">Stat 2 Title</div>
</div>
</li>
<li class="stat-item">
<div class="stat-info">
<div class="stat-data">7,367</div>
<div class="stat-title">Stat 3 Title</div>
</div>
</li>
<li class="stat-item">
<div class="stat-info">
<div class="stat-data">9.9k</div>
<div class="stat-title">Stat 4 Title</div>
</div>
</li>
</ul>
  • $1.5k
    Stat 1 Title
  • 5.6%
    Longer Stat 2 Title
  • 7,367
    Long Stat 3 Title
  • 9.9k
    Stat 4
  • 922.9k
    Super Long Stat 5 Title
  • 431.4k
    Stat 6 Title
  • 3/29/2017
    Stat 7 Title
  • 54
    Stat 8 Title
                      
<ul class="stat-board">
<li class="stat-item">
<div class="stat-info">
<div class="stat-data">$5.1k</div>
<div class="stat-title">Stat 1 Title</div>
</div>
</li>
<li class="stat-item">
<div class="stat-info">
<div class="stat-data">5.6%</div>
<div class="stat-title">Longer Stat 2 Title</div>
</div>
</li>
<li class="stat-item">
<div class="stat-info">
<div class="stat-data">7,367</div>
<div class="stat-title">Long Stat 3 Title</div>
</div>
</li>
<li class="stat-item">
<div class="stat-info">
<div class="stat-data">9.9k</div>
<div class="stat-title">Stat 4 Title</div>
</div>
</li>
</ul>
  • Stat 1 Title
  • Stat 2 Title
  • Stat 3 Title
  • Stat 4 Title
                      
<ul class="stat-board stat-board-four">
<li class="stat-item">
<div class="stat-info">
<div class="stat-data">–</div>
<div class="stat-title">Stat 1 Title</div>
</div>
</li>
  • $1.5kIncrease
    Stat 1 Title
    Prev $0.6k
  • 5.6%Increase
    Stat 2 Title
    Prev 4.3%
  • 7,367Decrease
    Stat 3 Title
    Prev 7,367
  • 9.9kDecrease
    Stat 4 Title
    Prev 10.1k
                      
<ul class="stat-board stat-board-four">
<li class="stat-item">
<div class="stat-info">
<div class="stat-data">
$1.5k
<span class="glyphicons glyphicons-chevron-up stat-arrow" aria-hidden="true"></span>
<span class="reader-only">Increase</span>
</div>
<div class="stat-title">Stat 1 Title</div>
<div class="stat-sub-info">Prev $0.6k</div>
</div>
</li>
<li class="stat-item">
<div class="stat-info">
<div class="stat-data">
5.6%
<span class="glyphicons glyphicons-chevron-up stat-arrow" aria-hidden="true"></span>
<span class="reader-only">Increase</span>
</div>
<div class="stat-title">Stat 2 Title</div>
<div class="stat-sub-info">Prev 4.3%</div>
</div>
</li>
<li class="stat-item">
<div class="stat-info">
<div class="stat-data">
7,367
<span class="glyphicons glyphicons-minus stat-arrow" aria-hidden="true"></span>
<span class="reader-only">Decrease</span>
</div>
<div class="stat-sub-info">Prev 7,367</div>
<div class="stat-title">Stat 3 Title</div>
</div>
</li>
<li class="stat-item">
<div class="stat-info">
<div class="stat-data">
9.9k
<span class="glyphicons glyphicons-chevron-down stat-arrow" aria-hidden="true"></span>
<span class="reader-only">Decrease</span>
</div>
<div class="stat-title">Stat 4 Title</div>
<div class="stat-sub-info">Prev 10.1k</div>
</div>
</li>
</ul>
Email Performance
  • $1.5kIncrease
    Stat 1 Title Today
    Prev $0.6k
  • 5.6%Increase
    Stat 2 Title
    Prev 4.3%
  • 7,367Decrease
    Stat 3 Title
    Prev 7,367
  • 9.9kDecrease
    Stat 4 Title
    Prev 10.1k
                      
<div class="stat-board-wrapper panel">
<header class="panel-header no-border">
<h6 class="panel-title">Email Performance</h6>
<nav class="panel-nav">
<div class="stat-board-timeframe">Last 30 Days</div>
</nav>
</header >
<ul class="stat-board stat-board-four">
<li class="stat-item">
<div class="stat-info">
<div class="stat-data">
$1.5k
<span class="glyphicons glyphicons-chevron-up stat-arrow" aria-hidden="true"></span>
<span class="reader-only">Increase</span>
</div>
<div class="stat-title">Stat 1 Title</div>
<div class="stat-sub-info">Prev $0.6k</div>
</div>
</li>
<li class="stat-item">
<div class="stat-info">
<div class="stat-data">
5.6%
<span class="glyphicons glyphicons-chevron-up stat-arrow" aria-hidden="true"></span>
<span class="reader-only">Increase</span>
</div>
<div class="stat-title">Stat 2 Title</div>
<div class="stat-sub-info">Prev 4.3%</div>
</div>
</li>
<li class="stat-item">
<div class="stat-info">
<div class="stat-data">
7,367
<span class="glyphicons glyphicons-minus stat-arrow" aria-hidden="true"></span>
<span class="reader-only">Decrease</span>
</div>
<div class="stat-title">Stat 3 Title</div>
<div class="stat-sub-info">Prev 7,367</div>
</div>
</li>
<li class="stat-item">
<div class="stat-info">
<div class="stat-data">
9.9k
<span class="glyphicons glyphicons-chevron-down stat-arrow" aria-hidden="true"></span>
<span class="reader-only">Decrease</span>
</div>
<div class="stat-title">Stat 4 Title</div>
<div class="stat-sub-info">Prev 10.1k</div>
</div>
</li>
</ul>
</div>
  • $90k
    Total Amount Received to Date
  • $100k
    Total Amount Expected to Date
  • $100k
    Total Amount Expected
                      
<div class="stat-board-wrapper">
<ul class="stat-board stat-board-three">
<li class="stat-item">
<div class="stat-info">
<div class="stat-data">$90k</div>
<div class="stat-title">Total Amount Received to Date</div>
</div>
</li>
<li class="stat-item">
<div class="stat-info">
<div class="stat-title">Total Amount Expected to Date</div>
<div class="stat-data">$100k</div>
</div>
</li>
<li class="stat-item">
<div class="stat-info">
<div class="stat-data">$100k</div>
<div class="stat-title">Total Amount Expected</div>
</div>
</li>
</ul>
<div class="loading-bar-wrapper loading-bar-success">
<progress max="100" value="90"></progress>
<a class="progress-indicator" data-placement="top" data-original-title="tooltip text here"></a>
</div>
</div>

Search Results

Powered by