SECTION

Fact strip

A row of numbers with captions, edge to edge, held between two rules.

Four facts

11Years shipping interfaces

40kDrawings made in the first month

60Frames per second, held

1Engineer on most of it

HTML

<section class="shell-flush shell-sunk">
  <div class="shell">
    <div class="fact-strip-row">
      <div class="fact"><span class="fact-n">11</span><span class="fact-label">Years shipping interfaces</span></div>
      <div class="fact"><span class="fact-n">40k</span><span class="fact-label">Drawings made in the first month</span></div>
      <div class="fact"><span class="fact-n">60</span><span class="fact-label">Frames per second, held</span></div>
      <div class="fact"><span class="fact-n">1</span><span class="fact-label">Engineer on most of it</span></div>
    </div>
  </div>
</section>

Reference

Read from sections/fact-strip.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.fact-strip-row.fact.fact-n.fact-label

READS--ds-fact-basis--ds-font-body--ds-font-display--ds-gap--ds-hairline--ds-ink--ds-ink-soft--ds-pad-card--ds-rule--ds-text-caption--ds-text-h2--ds-track-tight--ds-weight-display

Notes

WHY THIS IS FLEX AND NOT A HAIRLINE GRID

A grid gives every cell the same width. A strip of facts wants each one to take the room its caption needs, and the last row to fill rather than leaving a hole. flex: 1 1 basis does that; auto-fit does not.

The dividers still use the closed-frame trick — a border on the container's leading edge and one on each item's trailing edge — which survives wrapping, where a :not(:last-child) rule would leave a stray line at the end of every wrapped row.