Mark · Patterns

Stats band

Numbers, given room, as a band of their own — a section header over a stats row. When you want the figures WITHOUT the band (beside prose in a split, say), reach past this for the stats component directly; that is what it is for.

These are full-width bands, so the specimens below are cramped by the documentation column. Use Full page preview on any example to see it own the viewport.

Default

Full page preview ↗

Four numbers, ranged left under a heading.

By the numbers

What it adds up to.

Partials
41
Starter themes
2
Light and dark
100%
Build steps to adopt
0
<section class="mk-section">
  <div class="mk-container">
    <div class="mk-title-block">
      <p class="mk-eyebrow text-uppercase fw-semibold mb-2">By the numbers</p>
      <h2 class="mb-2">What it adds up to.</h2>
    </div>
    <dl class="mk-row mk-row--4up mk-stats">
      <div class="mk-stat">
        <dt class="mk-stat-label">Partials</dt>
        <dd class="mk-stat-value">41</dd>
      </div>
      <div class="mk-stat">
        <dt class="mk-stat-label">Starter themes</dt>
        <dd class="mk-stat-value">2</dd>
      </div>
      <div class="mk-stat">
        <dt class="mk-stat-label">Light and dark</dt>
        <dd class="mk-stat-value">100%</dd>
      </div>
      <div class="mk-stat">
        <dt class="mk-stat-label">Build steps to adopt</dt>
        <dd class="mk-stat-value">0</dd>
      </div>
    </dl>
  </div>
</section>
eyebrow: By the numbers
title: What it adds up to.
items: [4 items]

Centered

Full page preview ↗

align: center — for a band that stands on its own between two sections.

Trusted where it matters.

The same numbers, centred, when the row is the whole band.

Students enrolled
12,000+
Programs of study
90+
Student–faculty ratio
18:1
<section class="mk-section">
  <div class="mk-container">
    <div class="mk-title-block mk-title-block--center">
      <h2 class="mb-2">Trusted where it matters.</h2>
      <p class="lead text-body-secondary mb-0">The same numbers, centred, when the row is the whole band.</p>
    </div>
    <dl class="mk-row mk-row--3up mk-stats text-center">
      <div class="mk-stat">
        <dt class="mk-stat-label">Students enrolled</dt>
        <dd class="mk-stat-value">12,000+</dd>
      </div>
      <div class="mk-stat">
        <dt class="mk-stat-label">Programs of study</dt>
        <dd class="mk-stat-value">90+</dd>
      </div>
      <div class="mk-stat">
        <dt class="mk-stat-label">Student–faculty ratio</dt>
        <dd class="mk-stat-value">18:1</dd>
      </div>
    </dl>
  </div>
</section>
align: center
title: Trusted where it matters.
intro: The same numbers, centred, when the row is the whole band.
items: [3 items]
Fields (9)
FieldTypeNotes
eyebrow text
title text
intro textarea
items repeater
container text
align text start or center
shape_bottom group Cuts the band's BOTTOM edge. The shape is painted in this band's own ground and hangs over the band below, so the band below declares nothing.
shape_top group The same, on the band's TOP edge — it hangs upward over the band above.
class_names text
On this page