Stat

Example

A simple pattern for displaying a numeric statistic or icon with an accompanying label. Pairs well with sizing utilities.

7200 Running Watts 
<div class="Stat ">
  <span class="Stat-value" aria-hidden="false">
    7200
  </span>

  <span class="Stat-label ">
    Running Watts
  </span>
</div>

With Icon

Although the pattern is named Stat it works just as well with an icon instead of a text stat. The pattern has been fine-tuned so that the icon's styling and alignment is consistent with text stats.

Propane 
<div class="Stat ">
  <svg width="35" height="28" viewBox="0 0 35 28" aria-hidden="false" class="Stat-value">
    <path d="M26.8 6.6H22V4.4c0-1.2-2-2.1-4.5-2.1S13 3.2 13 4.4v2.2H9c-5 0-9 4-9 8.9s4 8.9 8.9 8.9h17.9c4.6-.4 8.2-4.2 8.2-8.9S31.4 7 26.8 6.6zm-5.5 13.7s-2.6-3.9-3.8-4.4c-1.3.5-3.8 4.4-3.8 4.4s-.8-2.1-.8-4.3 4.7-6.8 4.7-6.8 4.7 4.6 4.7 6.8c-.2 2.2-1 4.3-1 4.3z" />
  </svg>

  <span class="Stat-label ">
    Propane
  </span>
</div>

Align Center

A stat can easily be centered with the Stat--alignCenter modifier.

7200 Running Watts 
<div class="Stat Stat--alignCenter">
  <span class="Stat-value" aria-hidden="false">
    7200
  </span>

  <span class="Stat-label ">
    Running Watts
  </span>
</div>