# Stat comparison

> A side-by-side comparative delta matrix: two balanced 1px currentColor panels contrast industry standard baseline metrics directly against platform outcomes across setup time, availability, and response latency. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/stat-comparison.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: column, columns, group, heading, paragraph
Keywords: stats, statistics, numbers, metrics, comparison, before after, delta, benchmarks

## Variations (2)

### Delta panels (the default)

Identical markup in every theme.

Two balanced comparison panels on your base ground, each framed in 1px currentColor borders with internal hairlines separating each measured metric pair.

### Night comparison

Identical markup in every theme.

The entire band inverts to your contrast ground with your base on it: both comparison panels and all internal hairlines adapt seamlessly.


---

## The signature moment: direct benchmark delta

The section creates an immediate visual dialogue between legacy expectations and
modern platform velocity. Two balanced 50/50 panels sit side-by-side inside
clean 1px `currentColor` frames. Each panel aligns three corresponding metrics
across matching hairlines, making the performance delta unmistakable.

## Why this is not the other stats patterns

- `stat-quadrant` is a 2x2 grid of standalone findings.
- `stat-split` pits editorial storytelling against a single data stack.
- `stat-pillars` arranges three positive case findings in isolation.
- `stat-comparison` is a two-column paired comparative delta matrix explicitly
  benchmarking legacy vs improved outcomes.

## Mechanics worth knowing

- **Matching internal hairline dividers.** Each metric pair is separated by a
  `border-top: 1px solid currentColor` with matching top padding, ensuring
  both columns align rhythmically across the fold.
- **Both panels carry 1px currentColor borders.** Ensuring clean separation
  without heavy background fills.
- **Explicit colour on all text elements.** Theme link and heading styles cannot
  override text legibility.

## The variations

- **Night comparison.** The entire section inverts to your contrast ground with
  base text and `currentColor` panel borders.

## 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 two-column 50/50 delta layout.**
- **The internal metric spacing and hairline dividers.**
- **The display typographic ramp.**

## What you change first

1. **The paired comparative metrics (Industry Standard vs Platform).**
2. **The section heading and methodology note.**

## Contrast

All text and figures are `contrast` on `base` (or `base` on `contrast` in
Night comparison). 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(2.25rem, 4.5vw, 3.25rem)