# Lead over three

> One feature carried across the top of the band at display size, with three compact ruled entries in a row beneath it. A tracked label, a sentence at the section's largest size held to a 52rem measure, a standfirst at 34rem and a line of terms, then a hairline over each of three thirds. The lead argues and the three answer, and the weighting is read top to bottom rather than across a seam. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/feature-lead-row.html
Section: Features
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 6.7 to 7.0. 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: features, lead, row, asymmetric, primary, benefits

Promise: Identical markup in every theme.

---

## The signature moment: weight asymmetry read top to bottom

**One point is the argument and the other three are the answer, and the page
tells you which is which before you have read a word.** The lead is set at
display size with a standfirst beneath it and no rule anywhere near it; the
three entries under it are set at around 1.25rem, each opened by a hairline
across the top of its third, in a row that reads as a ledger.

Turning the asymmetry through ninety degrees changes what it costs a reader.
Across a seam, the lead and the list are alternatives and the eye picks one.
Stacked, the lead is simply first: it is the whole width of the band's measure
and the only thing on its line, so it is read, and the three thirds under it are
read afterwards as its terms. That is the shape to take when the lead has to be
the first thing on the page rather than the left thing, and when the three
points are closer to equals than the split version lets them be.

The rules do the second half of the work. The row is entirely ruled and the lead
is not, so the seam between them is a change of density rather than a divider,
and the three hairlines starting on the same line turn three separate points
into one object.

## Why this is not `feature-lead-list`

`feature-lead-list` is the same asymmetry across a seam: the lead holds a 54%
column at display size and the three entries run down a 46% ledger opposite it.
It is the denser of the two and it is the one to take when the section has to
sit shorter on the page. This one is taller and flatter, and it wins where the
lead is the sentence the whole page is built on, because nothing sits beside it
to be read instead.

## What it inherits from your theme

- **The typeface.** No font family is stated anywhere. The display lead and the
  compact entries are both set in your face, and the size gap between them is
  what carries the design in a serif theme and in a sans one.
- **Your colours.** The ground asks for `base` and everything on it asks for
  `contrast`, each written as a fallback chain ending on a colour WordPress
  itself guarantees. Nothing here can resolve to nothing. The label and the
  closing line ask for the label role first and fall through to the same
  `contrast` everywhere else.
- **Your spacing scale.** The band's padding, the gap under the lead block, the
  gutter between the thirds and the air under each hairline are spacing presets.
- **The rules.** Every hairline is `currentColor`, so it is exactly the colour of
  the text beneath it, on either ground.

## What it decides for itself

- **Full bleed with its own measure.** The section spans the viewport and holds
  its content to 1240px.
- **The lead block is held to 52rem at the left, not to the band.** A sentence at
  the `xx-large` rung across the full 1240 runs to a line length no display type
  survives. 52rem is about eight or nine words a line at the top of the ramp, and
  left justification keeps the block's edge on the same line as the first third
  below it.
- **The standfirst is held to 34rem inside that 52rem block**, in a nested
  constrained group, so it reads at about 70 characters rather than at the lead's
  own measure. Two measures in one column is the reason the lead reads as a
  headline with a note rather than as two paragraphs.
- **The ramp.** A 14px tracked label, the lead on the `xx-large` rung with
  `clamp(2.5rem, 5vw, 4rem)` behind it, the standfirst on `large`, entry headings
  on `large` at a lower clamp and entry copy on `medium` with a 15px floor.
  Nothing in the section uses a bare font-size preset, because core's `small` is
  13px.
- **The hairline is a border on the entry group, not a separator block.** Each
  third carries its own `border-top`, so the three rules are exactly the width of
  their columns and the gutter between them stays open. A separator would have
  run the band and made the row a table.
- **Where it stacks.** Below 782px WordPress stacks the three thirds, so the
  lead comes first and the entries follow it one under another, each still
  opening on its own rule. The asymmetry survives as sequence: the loud thing,
  then the ledger.

## What to change first

1. **The lead heading.** It is the sentence the section exists to say. Ten to
   fourteen words is the shape it is tuned for; past about eighteen it takes a
   third line and the entries drop below the fold on a laptop.
2. **The standfirst.** Two lines. Three still reads. One leaves the lead block
   short against the width it has taken.
3. **The three entries.** Four to six words in the heading, one sentence under
   it. They are deliberately too small to argue, so do not try to make them.
4. **The closing line under the lead.** A tracked uppercase note, and the only
   place in the section where the same thing is said twice. Delete the paragraph
   if it is not true of your plans.
5. **The number of entries.** Duplicate a column and reset the three widths.
   Four thirds become four quarters at roughly 260px each at 1240, which is
   still two or three words a line in the heading; five is too many.

## Notes

- Core blocks only: group, columns, column, heading, paragraph. No plugin,
  nothing to keep updated.
- The lead block carries a zero block gap and states every margin itself, so the
  air between the label, the heading, the standfirst and the closing line is
  four decisions rather than one theme default.
- Text is measured at 4.5:1 against the ground it actually sits on; the lead
  heading qualifies as large text at 3:1 but is held to the same pair as the
  copy, because it uses the same chain.
