[Library] Features

Catalogue accessStandard

Feature lead and list

One feature carried at display size across half the band, with three compact ruled entries opposite it. The weighting is the point: the lead argues, the three answer, and nothing on the page pretends the four are equal. 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

One feature carried at display size across half the band, with three compact ruled entries opposite it. Every other feature pattern in the catalogue weights its points equally: three even columns, four equal rows, four points hung off a spine. This one does not, and that is the whole design.

The signature moment

Weight asymmetry across the seam

One point is the argument and the other three are the answer. The lead is set at up to 3.5rem with a lede beneath it and no rule anywhere near it; the three entries opposite are set at around 1.25rem, each closed top and bottom by a hairline, in a column that reads as a ledger. The two halves are almost the same width and nothing like the same weight, so the eye lands on the lead, then runs down the list, and the page has told you which feature you are actually buying before you have read a word.

The rules do the second half of the work. The list is entirely ruled and the lead is not, apart from one hairline under its closing line, so the seam between them is a change of density rather than a divider.

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.
  • Your spacing scale. The band's padding, the gap between the two halves and the padding inside each ruled entry are spacing presets.
  • The rules. Every hairline is currentColor, so it is exactly the colour of the text beside 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 split. 54% to the lead and 46% to the list, with a gutter that grows from 2rem to 4.5rem. The lead is the wider half by a little and the louder half by a lot.
  • The ramp. A 14px tracked label, the lead heading from 2.25rem to 3.5rem at line-height 1.05, a lede from 1.0625rem to 1.25rem, entry headings from 1.125rem to 1.3125rem, and entry copy with a 15px floor. Nothing in the section uses a bare font-size preset, because core's small is 13px.
  • Where it stacks. Below 782px WordPress stacks the two halves, so the lead comes first and the ruled list follows it. The asymmetry survives as sequence: the loud thing, then the ledger.
  • The stacked variation's lede is held to 34rem inside its 52rem block, in a nested constrained group, so the standfirst reads at about 70 characters rather than at the block's full measure.

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.
  2. The lede. Two lines. Three still reads; one leaves the lead column short against the ruled list beside it.
  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 group if it is not true of your plans.
  5. The number of entries. Duplicate an entry group. Keep the bottom hairline on whichever entry ends up last: it is a border on that group, not a separate block.
The variation87 words

Lead over three turns the same asymmetry through ninety degrees. The lead runs across the top of the band at its largest, held to a 52rem measure, and the three entries sit under it as a ruled row of thirds. It is the answer when the lead needs to be the first thing on the page rather than the left thing, and the three points are closer to equals. It changes the composition, not the dial: the base is a split and the variation is a stack.

Notes82 words
  • Core blocks only: group, columns, column, heading, paragraph. No plugin, nothing to keep updated.
  • The entries are wrapped in a group with a zero block gap, so consecutive rules sit tight against each other's padding and the column reads as one ledger.
  • 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.
Back to the library

Continue exploring

Next in Features

Explore all 15 Features patterns