[Library] Stats

Catalogue accessStandard

Stat split

An asymmetric editorial split: a narrative anchor column on the left with eyebrow, display heading, contextual paragraph and action button, set against a stacked four-row data ledger on the right with full-width currentColor hairlines. 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

An asymmetric editorial split: a narrative anchor column on the left with eyebrow, display heading, contextual paragraph and action button, set against a stacked four-row data ledger on the right with full-width currentColor hairlines.

The signature moment

Asymmetric editorial proof

The pattern merges storytelling with empirical proof. The left column (42%) provides deep editorial context and an action prompt, while the right column (58%) stacks four clean data rows. Each row cleanly separates category label, display figure, and operational detail across full-width hairlines.

What it inherits from your theme

  • Typeface. No font family is stated anywhere.
  • Palette. Ground, text and button colours resolve to base and contrast.
  • Spacing. Band padding and block gaps derive from core spacing presets.

What it decides for itself

  • The 42/58 asymmetric column split.
  • The internal ledger row proportions and hairline borders.
  • The typographic hierarchy linking narrative and data.

What you change first

  1. The editorial headline, description and button link.
  2. The four data row labels, numerals and context lines.
Why this is not the other stats patterns46 words
  • stat-stack is a single-column full-width ledger with figures flush right.
  • stat-monument centers around one colossal hero numeral.
  • stat-pillars uses three balanced upright framed boxes.
  • stat-split provides an asymmetric 42/58 split pairing a full narrative column and button with a 4-row data matrix.
Mechanics worth knowing67 words
  • Rows do not collapse on mobile. The data rows use isStackedOnMobile: false so the figure remains side-by-side with its explanatory context at 390px.
  • Top and bottom borders frame the ledger. Each row carries a border-top in currentColor, and the final row adds border-bottom to seal the stack.
  • Headings and button state explicit colour chains. Ensuring valid rendering and strong contrast across all theme environments.
The variations42 words
  • Night split. The entire section inverts to your contrast ground with base text and an inverted primary button.
  • Seam reversed. The column order is mirrored: the data ledger takes the left flank while the editorial narrative sits on the right.
Contrast27 words

All text and figures are contrast on base (or base on contrast in Night split). 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(1.875rem, 3.5vw, 2.75rem)
Back to the library

Continue exploring

Next in Stats

Explore all 10 Stats patterns