Stat

Stat Figma Code Connected

Stat cards highlight a single data value with an optional trend or other secondary attribute.

Default stat

Create a default stat with a block level element that has class .hc-stat. The stat should have at least two children inside of it: a title of the stat with class .hc-stat-title, and the wrapper for the value and icon with class .hc-stat-content. This later element should have an .hc-stat-value and an optional .hc-icon.

Active goals 17
Active goals 17
HTML
Expand Edit in Playground Copy 

<div class="hc-stat">
  <span class="hc-stat-title">Active goals</span>
  <span class="hc-stat-content">
    <span class="hc-stat-value">17</span>
  </span>
</div>
<div class="hc-stat">
  <span class="hc-stat-title">Active goals</span>
  <span class="hc-stat-content">
    <span class="hc-stat-value">17</span>
    <i class="hc-icon hc-icon--trophy"></i>
  </span>
</div>

Secondary label

A secondary label or stat attribute sits below the stat value and can provide additional context or meaning for the primary stat value. The traditional use case here is to provie a trend indication or some high level metric as a time comparison.

Add an element with class .hc-stat-secondary below the .hc-stat-content wrapper.

Active goals 17 7 (42%)
Open forms 245 +21% since last week
HTML
Expand Edit in Playground Copy 

<div class="hc-stat">
  <span class="hc-stat-title">Active goals</span>
  <span class="hc-stat-content">
    <span class="hc-stat-value">17</span>
    <i class="hc-icon hc-icon--trophy"></i>
  </span>
  <span class="hc-stat-secondary">
    <i class="hc-icon hc-icon--arrow-up-right hc-icon--12 hc-icon--solid hc-icon--success"></i>
    <span class="hc-text--success">7 (42%)</span>
  </span>
</div>
<div class="hc-stat">
  <span class="hc-stat-title">Open forms</span>
  <span class="hc-stat-content">
    <span class="hc-stat-value">245</span>
    <i class="hc-icon hc-icon--clipboard"></i>
  </span>
  <span class="hc-stat-secondary">
    +21% since last week
  </span>
</div>

Stat grid

Stats wrapped in an element with class .hc-stat-grid will automatically place them in a row with an appropriate gap, left justified. On small screens they will stack vertically by default.

Append the class .hc-stat-grid--justify to force the stats to fill the entire container element’s width. You should only do this when there are a large enough number of stat cards that white space inside the cards is minimal.

Open forms 22
Active goals 17
Next steps 170
Open forms 22
Active goals 17
Next steps 170
HTML
Expand Edit in Playground Copy 

<div class="hc-stat-grid">
  <div class="hc-stat">
    <span class="hc-stat-title">Open forms</span>
    <span class="hc-stat-content">
      <span class="hc-stat-value">22</span>
      <i class="hc-icon hc-icon--clipboard"></i>
    </span>
  </div>
  <div class="hc-stat">
    <span class="hc-stat-title">Active goals</span>
    <span class="hc-stat-content">
      <span class="hc-stat-value">17</span>
      <i class="hc-icon hc-icon--trophy"></i>
    </span>
  </div>
  <div class="hc-stat">
    <span class="hc-stat-title">Next steps</span>
    <span class="hc-stat-content">
      <span class="hc-stat-value">170</span>
      <i class="hc-icon hc-icon--next-steps"></i>
    </span>
  </div>
</div>
<div class="hc-stat-grid hc-stat-grid--justify">
  <div class="hc-stat">
    <span class="hc-stat-title">Open forms</span>
    <span class="hc-stat-content">
      <span class="hc-stat-value">22</span>
      <i class="hc-icon hc-icon--clipboard"></i>
    </span>
  </div>
  <div class="hc-stat">
    <span class="hc-stat-title">Active goals</span>
    <span class="hc-stat-content">
      <span class="hc-stat-value">17</span>
      <i class="hc-icon hc-icon--trophy"></i>
    </span>
  </div>
  <div class="hc-stat">
    <span class="hc-stat-title">Next steps</span>
    <span class="hc-stat-content">
      <span class="hc-stat-value">170</span>
      <i class="hc-icon hc-icon--next-steps"></i>
    </span>
  </div>
</div>

Wrapping should be avoided

Note that when the stats exceed the available width on larger screens, they will wrap to a new row. Visually we recommend not using more than 4-5 cards so that this wrapping does not occur.

Semantic and activity colors

Semantic classes can be applied directly to the content wrapper, i.e. the .hc-stat-content element, in the format of .hc-stat--success, etc.

Similarly, you can use activity type classes like .hc-activity--goal to apply the activity color to the value and icon. Available activities are form, summative, goal, event, next-step, and cycle.

Semantic stats

Forms 123
Goals 98
Next steps 250
Cycles 40

Activity stats

Forms 123
Summatives 48
Goals 98
Events 1,760
Next steps 250
Cycles 40
HTML
Expand Edit in Playground Copy 

<h3 class="hc-h3">Semantic stats</h3>
<div class="hc-stat-grid mb-8">
  <div class="hc-stat">
    <span class="hc-stat-title">Forms</span>
    <span class="hc-stat-content hc-stat--success">
      <span class="hc-stat-value">123</span>
      <i class="hc-icon hc-icon--clipboard"></i>
    </span>
  </div>
  <div class="hc-stat">
    <span class="hc-stat-title">Goals</span>
    <span class="hc-stat-content hc-stat--info">
      <span class="hc-stat-value">98</span>
      <i class="hc-icon hc-icon--trophy"></i>
    </span>
  </div>
  <div class="hc-stat">
    <span class="hc-stat-title">Next steps</span>
    <span class="hc-stat-content hc-stat--warning">
      <span class="hc-stat-value">250</span>
      <i class="hc-icon hc-icon--next-steps"></i>
    </span>
  </div>
  <div class="hc-stat">
    <span class="hc-stat-title">Cycles</span>
    <span class="hc-stat-content hc-stat--danger">
      <span class="hc-stat-value">40</span>
      <i class="hc-icon hc-icon--cycle"></i>
    </span>
  </div>
</div>
<h3 class="hc-h3">Activity stats</h3>
<div class="hc-stat-grid">
  <div class="hc-stat">
    <span class="hc-stat-title">Forms</span>
    <span class="hc-stat-content hc-activity--form">
      <span class="hc-stat-value">123</span>
      <i class="hc-icon hc-icon--clipboard"></i>
    </span>
  </div>
  <div class="hc-stat">
    <span class="hc-stat-title">Summatives</span>
    <span class="hc-stat-content hc-activity--summative">
      <span class="hc-stat-value">48</span>
      <i class="hc-icon hc-icon--notebook"></i>
    </span>
  </div>
  <div class="hc-stat">
    <span class="hc-stat-title">Goals</span>
    <span class="hc-stat-content hc-activity--goal">
      <span class="hc-stat-value">98</span>
      <i class="hc-icon hc-icon--trophy"></i>
    </span>
  </div>
  <div class="hc-stat">
    <span class="hc-stat-title">Events</span>
    <span class="hc-stat-content hc-activity--event">
      <span class="hc-stat-value">1,760</span>
      <i class="hc-icon hc-icon--calendar"></i>
    </span>
  </div>
  <div class="hc-stat">
    <span class="hc-stat-title">Next steps</span>
    <span class="hc-stat-content hc-activity--next-step">
      <span class="hc-stat-value">250</span>
      <i class="hc-icon hc-icon--next-steps"></i>
    </span>
  </div>
  <div class="hc-stat">
    <span class="hc-stat-title">Cycles</span>
    <span class="hc-stat-content hc-activity--cycle">
      <span class="hc-stat-value">40</span>
      <i class="hc-icon hc-icon--cycle"></i>
    </span>
  </div>
</div>

Combo stats

Larger combination stats can show a primary stat value with a number of subsidiary stat values next to it, with a light dividing line. These are useful to present related statistics together in one card, often alongside a chart card or something else large.

Wrap any number of individual .hc-stat elements inside of a parent .hc-stat element’s .hc-stat-content section. :yodawg: The dividing line will be automatically applied after the first stat, and the remainders will sit in a row to the right.

Cycle Overview 256 Activities 134 Forms 72 Goals 50 Next Steps
HTML
Expand Edit in Playground Copy 

<div class="hc-stat">
  <span class="hc-stat-title hc-stat-title--lg">
    Cycle Overview
  </span>
  <span class="hc-stat-content">
    <span class="hc-stat">
      <span class="hc-stat-content">
        <span class="hc-stat-value">256</span>
      </span>
      <span class="hc-stat-title">
        Activities
      </span>
    </span>
    <span class="hc-stat">
      <span class="hc-stat-content hc-activity--form">
        <span class="hc-stat-value">134</span>
      </span>
      <span class="hc-stat-secondary">
        Forms
      </span>
    </span>
    <span class="hc-stat">
      <span class="hc-stat-content hc-activity--goal">
        <span class="hc-stat-value">72</span>
      </span>
      <span class="hc-stat-secondary">
        Goals
      </span>
    </span>
    <span class="hc-stat hc-for--sm">
      <span class="hc-stat-content hc-activity--next-step">
        <span class="hc-stat-value">50</span>
      </span>
      <span class="hc-stat-secondary">
        Next Steps
      </span>
    </span>
  </span>
</span>

We recommend appending the class .hc-stat-title--lg to the combo stat title at the top, to make it a bit bigger.

It’s common to omit the icon in these and to move the individual stat titles to the secondary position. The primary stat value can have an .hc-stat-title there to make it a bit bolder.

Celebration state

Finally, we have a fun celebration variant when a stat is showing something to be proud of!

Append class .hc-stat--celebrate to the stat component, individual or combo, for a fun background and border effect.

Remaining tasks 0 You're all done!
Cycle Overview 256 Activities 134 Forms 72 Goals 50 Next Steps
HTML
Expand Edit in Playground Copy 

<div class="hc-stat hc-stat--celebrate">
  <span class="hc-stat-title">
    Remaining tasks
  </span>
  <span class="hc-stat-content">
    <span class="hc-stat-value">0</span>
    <i class="hc-icon hc-icon--check hc-icon--solid"></i>
  </span>
  <span class="hc-stat-secondary">
    You're all done!
  </span>
</div>
<div class="hc-stat hc-stat--celebrate">
  <span class="hc-stat-title hc-stat-title--lg">
    Cycle Overview
  </span>
  <span class="hc-stat-content">
    <span class="hc-stat">
      <span class="hc-stat-content">
        <span class="hc-stat-value">256</span>
      </span>
      <span class="hc-stat-title">
        Activities
      </span>
    </span>
    <span class="hc-stat">
      <span class="hc-stat-content hc-activity--form">
        <span class="hc-stat-value">134</span>
      </span>
      <span class="hc-stat-secondary">
        Forms
      </span>
    </span>
    <span class="hc-stat">
      <span class="hc-stat-content hc-activity--goal">
        <span class="hc-stat-value">72</span>
      </span>
      <span class="hc-stat-secondary">
        Goals
      </span>
    </span>
    <span class="hc-stat">
      <span class="hc-stat-content hc-activity--next-step">
        <span class="hc-stat-value">50</span>
      </span>
      <span class="hc-stat-secondary">
        Next Steps
      </span>
    </span>
  </span>
</span>