# Stat split

> An asymmetric editorial split pairing a narrative, action and replaceable WordPress workspace photograph with a four-row data ledger. The photo sits beneath the introduction while full-width currentColor hairlines organise the figures beside it. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/stat-split.html
Section: Stats
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.
Blocks: button, buttons, column, columns, group, heading, image, paragraph
Keywords: stats, statistics, numbers, metrics, split, editorial, ledger, telemetry

## Variations (3)

### Editorial split (the default)

Identical markup in every theme.

The introduction, action and workspace photograph on the left, with a four-row data ledger on the right. The photograph is included and editable in WordPress.

### Night split

Identical markup in every theme.

The section inverts to your contrast ground with your base on it: both columns and the button adapt, and the row hairlines follow in currentColor.

### Seam reversed

Identical markup in every theme.

The four-row data ledger takes the left, while the introduction, action and same workspace photograph move together to the right.


---

## The signature moment: asymmetric editorial proof

The pattern merges storytelling with empirical proof. The left column (42%)
provides editorial context, an action and a photograph beneath them, 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.

## Why this is not the other stats patterns

- `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, button and photograph with a 4-row data matrix.

## Mechanics worth knowing

- **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.
- **The photo travels with the narrative.** It stays below the action in both
  column orders and fills the narrative column at a 3:2 cover crop.
- **Headings state colour chains.** The ordinary button inherits the theme;
  Night split supplies the inverted button colours.

## The variations

- **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 and photograph sit on the right.

## 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 photograph.** Use the Image block to replace the sample workspace
   photograph with your own project or setting, and update its alternative text.
3. **The four data row labels, numerals and context lines.**

## Contrast

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 type

Off the theme's ladder on purpose, because the size is the composition:
- paragraph at clamp(1.875rem, 3.5vw, 2.75rem)

## Included image

The workspace photograph comes from the reviewed WordPress collection in
`assets/wordpress-images.json`. Its public HTTPS URL stays in the copied Image
block, without a foreign attachment ID, and the preview uses the same source.
The photo is illustrative, not evidence for the sample metrics. No text sits
on it. All three designs remain core blocks only, with no plugin or custom CSS.