Mark · Components

Stats

A line of figures — the value carrying the accent and the weight, the label staying quiet under it. Marked up as a description list, because a stat is a name and a value. It is only the row: no band, no container, no padding, which is what makes it composable and why it lives here rather than inside the Stats band pattern.

Default

Full page preview ↗

Three figures, ranged left — so the row is thirds. The division follows the count, and the floor is low because stats are short, so they pack tighter than prose would.

On Oak Street
10 yrs
Pieces built
600+
Local hardwood
100%
<dl class="mk-row mk-row--3up mk-stats">
  <div class="mk-stat">
    <dt class="mk-stat-label">On Oak Street</dt>
    <dd class="mk-stat-value">10 yrs</dd>
  </div>
  <div class="mk-stat">
    <dt class="mk-stat-label">Pieces built</dt>
    <dd class="mk-stat-value">600+</dd>
  </div>
  <div class="mk-stat">
    <dt class="mk-stat-label">Local hardwood</dt>
    <dd class="mk-stat-value">100%</dd>
  </div>
</dl>
items: [3 items]

Centered

Full page preview ↗

align: center — for a row that is the whole of what it sits in.

Support
24/7
Uptime
99.9%
Requests a day
50k+
<dl class="mk-row mk-row--3up mk-stats text-center">
  <div class="mk-stat">
    <dt class="mk-stat-label">Support</dt>
    <dd class="mk-stat-value">24/7</dd>
  </div>
  <div class="mk-stat">
    <dt class="mk-stat-label">Uptime</dt>
    <dd class="mk-stat-value">99.9%</dd>
  </div>
  <div class="mk-stat">
    <dt class="mk-stat-label">Requests a day</dt>
    <dd class="mk-stat-value">50k+</dd>
  </div>
</dl>
align: center
items: [3 items]
Fields (3)
FieldTypeNotes
items repeater
align text empty (start) or center
class_names text
On this page