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>