[Library] Stats

Catalogue accessStandard

Stat ticker

A high-density horizontal data ribbon framed by top and bottom hairlines, dividing four key metrics with vertical currentColor hairlines. Designed to sit flush under a hero or between content sections for rapid empirical validation. States no colour and no font of its own.

Variation View
Before you copy
Open in a new window

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

A high-density horizontal data ribbon framed by top and bottom hairlines, dividing four key metrics with vertical currentColor hairlines. Designed to sit flush under a hero or between content sections for rapid empirical validation.

The signature moment

High-density data ribbon

The section provides maximum empirical validation in minimum vertical height. Framed by top and bottom currentColor hairlines, four data cells sit inline, demarcated by vertical hairlines. Each cell carries an uppercase tracked category slug, a bold display number on a tight 0.85 line-height, and a one-line context note.

What it inherits from your theme

  • Typeface. No font family is stated anywhere.
  • Palette. Ground and text resolve to base and contrast chains.
  • Spacing scale. Margin and padding presets derive from core tokens.

What it decides for itself

  • The compact four-column ribbon format.
  • The vertical hairline column divider layout.
  • The crisp typographic scale.

What you change first

  1. The four metric labels, numerals and short captions.
Why this is not the other stats patterns51 words
  • stat-row is a full section with larger display numerals and short baseline ticks.
  • stat-quadrant is a square 2x2 grid window.
  • stat-monument is a large asymmetric section with an editorial lede.
  • stat-ticker is an ultra-compact ribbon designed specifically to slot between major sections or immediately below a hero.
Mechanics worth knowing56 words
  • Top and bottom bounding rules. Defined as borders on the inner wrapper group, running the full constrained width.
  • Vertical cell hairlines. Columns 2, 3, and 4 carry border-left: 1px solid currentColor with internal padding, creating seamless column dividers.
  • All rules use currentColor. The entire structure responds to theme palette shifts without broken borders.
The variations17 words
  • Night ticker. The entire ribbon inverts to your contrast ground with base text and currentColor rules.
Contrast27 words

All text and figures are contrast on base (or base on contrast in Night ticker). Display figures meet 3:1 criteria; all labels and body copy meet 4.5:1.

Display type18 words

Off the theme's ladder on purpose, because the size is the composition:

  • paragraph at clamp(2rem, 3.4vw, 2.75rem)
Back to the library

Continue exploring

Next in Stats

Explore all 10 Stats patterns