[Library] Hero

Catalogue accessStandard

Hero ledger

A full-bleed opening section that doubles as a spec sheet: a display headline, a short lede and one action fill the left, while the right holds three ruled rows, each a tracked label over a value set large enough to read as content rather than fine print. The rules are currentColor and the ledger closes on a bottom rule. 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 full-bleed opening section built on core blocks only. It opens the page the way a hero should, and it answers the three questions a visitor actually has while it does it: what this is, who it is for, and when they get it.

The signature moment

Density contrast

The left of the section is air. An eyebrow, one display headline set tight, one lede at a comfortable measure, one action. Nothing else.

The right of the section is a ledger: three ruled rows, each a tiny widely tracked label over a value set at around 30px. The rules are hairlines in currentColor, one above each row and one closing the stack underneath, so the column reads as a ruled document rather than as a list.

The idea is the collision between those two densities in one section. The headline is loud and largely empty; beside it, packed into 38% of the width, sit three facts set at a size that says they are content and not fine print. A hero usually asks you to take its word for something. This one shows its working next to the claim.

If you already have split-hero, note the difference on purpose: that pattern's right column is a bordered panel of 11px metadata sitting under an overrunning bar, and it is deliberately quiet. This one is the opposite move: no panel, no box, open ruled rows carrying real values large enough to be read from across the room.

What it inherits from your theme

  • The typeface. No font family is stated anywhere. Headline, labels and values all render in whatever your theme.json sets, and the pattern is built to look set in a serif theme and in a sans one.
  • Colour. The ground asks for base, the type asks for contrast, and both chains end on a colour WordPress itself guarantees, so nothing here can resolve to nothing in a theme that defines neither.
  • Every rule. The three ledger hairlines and the closing rule are currentColor. They cannot blank, they need no chain, and they follow your text colour wherever your theme puts it.
  • Spacing rhythm. Padding and row spacing are core spacing presets 30 to 80, which your theme rescales, so the section breathes differently in Twenty Twenty-Four than in Twenty Twenty-Five, on purpose.
  • Button shape and hover. The action carries wp-element-button, so your theme's button element styles apply, including its hover.

What it decides for itself

  • Proportion. 56 / 38 with a wide gutter. The ledger is narrow so its values break over two lines and read as rows, and the headline is wide so it does not.
  • The two type ramps, and the gap between them. The headline is clamp(2.75rem, 6.2vw, 5rem) at line-height 0.94 with negative tracking; the ledger values are clamp(1.375rem, 1.9vw, 1.875rem); the labels are 13px uppercase at 0.2em. There is deliberately nothing of an intermediate size in the section.
  • Full bleed with its own measure. The section runs edge to edge and holds its content to 1240px rather than inheriting your body's reading width.
  • Its own ground and its own vertical padding. It sits on a page between other sections and does not rely on either neighbour for air or for colour.
  • Where it stacks. Below 782px the two columns stack, headline first, and the ledger keeps its rules and its scale: the fact rows are the part of this pattern that works best on a phone.
  • Contrast intent. Body text and labels sit on the base chain and aim at 4.5:1; the headline and the ledger values are large text and aim at 3:1. The hairlines are non-text marks. A chain guarantees a colour, not a particular one, so measure the pair in your own theme before you ship.

What to change first

  1. The three fact rows. They are the pattern. Keep the labels to two or three words and the values to a short clause: delivery time, guarantee, region, stack, price. If a value runs past two lines at your widths, cut it rather than shrinking it, because the size is the point.
  2. The headline. Six to twelve words. It is built to break over two or three lines against the ledger; a headline that runs to five loses the contrast.
  3. The action's label and link. It ships without a URL. Make the label a verb.
  4. The row count. Three is a spec sheet and reads as complete. A fourth row still works; a fifth turns the hero into a features section, which is a different pattern.
Notes73 words
  • Core blocks only: group, columns, column, heading, paragraph, buttons, button. No plugin, no script, nothing to keep updated.
  • The ledger's rules are per-side group borders rather than separators, so they run the full width of the column in every theme.
  • The night-ledger variation is the same composition with the ground and the type swapped. Nothing structural moves, so it is a straight answer to "how loud should this section be".
Back to the library

Continue exploring

Next in Hero

Explore all 18 Hero patterns