# Stat matrix

> An asymmetric bento matrix: one expansive double-height marquee cell on the left detailing a primary productivity metric, flanked by two stacked secondary stat cells on the right, all framed in 1px currentColor borders. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/stat-matrix.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, matrix, bento, mosaic, grid

## Variations (3)

### Bento matrix (the default)

Identical markup in every theme.

The asymmetric bento arrangement on your base ground: a large primary proof card on the left balanced against two stacked metric cells on the right.

### Matrix reversed

Identical markup in every theme.

The layout mirrored: two stacked secondary metric cells command the left flank while the large marquee card anchors the right.

### Night matrix

Identical markup in every theme.

The entire section inverts to your contrast ground with base text: all three bento cells and their hairline borders adapt cleanly.


---

## The signature moment: asymmetric bento balance

The layout provides rhythm and visual hierarchy through unequal area distribution.
The primary marquee cell occupies 58% of the width, pairing a massive percentage
numeral with a subhead and explanatory narrative. The remaining 42% is divided
vertically into two secondary metric blocks, giving each finding its exact
proportionate weight.

## Why this is not the other stats patterns

- `stat-quadrant` is a symmetrical 2x2 grid with four equal quadrants.
- `stat-pillars` uses three identical vertical columns.
- `stat-split` pits narrative copy against a multi-row data ledger.
- `stat-matrix` is an asymmetric bento grid with one double-height primary card
  and two stacked secondary cards.

## Mechanics worth knowing

- **Contiguous 1px currentColor borders.** Each card is independently outlined in
  `currentColor` with matching internal padding.
- **Vertical gap between stacked cards.** Managed via `margin-top` on the lower
  card, matching the section column gap.
- **Constrained footnote.** Keeps the research source citation cleanly formatted
  below the matrix.

## The variations

- **Night matrix.** The entire section inverts to your contrast ground with base
  text and `currentColor` card borders.
- **Matrix reversed.** Mirrors the columns: two stacked cards on the left, marquee
  card on the right.

## 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 asymmetric 58/42 bento grid proportions.**
- **The internal card padding and vertical typography hierarchy.**
- **The display typographic ramp.**

## What you change first

1. **The marquee metric, subhead, and context paragraph.**
2. **The two stacked secondary metrics and labels.**
3. **The methodology footnote.**

## Contrast

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