Stat card

A card of three parts: a <small> label, a <strong> value and a <span> of context. Four of them in a data-grid="4" make the row of numbers at the top of a dashboard.

Basic

<div data-grid="4">
  <article><small>Unread mail</small><strong>12</strong><span>6 need a reply</span></article>
  <article><small>Commits this week</small><strong>49</strong><span>across four repositories</span></article>
  <article><small>Open pull requests</small><strong>5</strong><span>2 are waiting on you</span></article>
  <article><small>Focus time</small><strong>14.5 h</strong><span>Monday to this morning</span></article>
</div>

The three parts are plain elements, so a stat card is a card with nothing new in it.

Notes

• <strong> is set at --s72-s4 with normal weight; the <span> after it takes --s72-fg-2.
• Add data-count to the <strong> and the number counts up once when the card scrolls into view; see Count.
• The cards stretch to equal height, so a long label on one does not shorten the others.