A tracked eyebrow, one display headline held to a 30rem measure and a short lede on the left; on the right a ruled index of four numbered entries, each a tracked numeral, a short title and one line of description, closed top and bottom by currentColor hairlines, with one flat action under it. The whole band is full-bleed on the theme's paper with its own 1240px inner.
This is the hero for a LONG page. The four entries are not decoration and they are not features: they are meant to name the four sections that follow, in the order the visitor will meet them. Change the four titles to your own section headings and the hero stops being a claim and becomes a map.
The signature moment
Density contrast
One loose half against one dense half, in the same band and in the eye at the same time. The left is a 68px headline on a 480px measure with air around it and three things in it; the right is four ruled entries, five hairlines and twelve lines of type in 432px. Neither half is decorated. The whole idea of the section is the difference in packing between them: the statement opens the page and the index tells you what is on it, and you read both before you have decided to read either.
That is why the base runs the index as a rail beside the headline rather than as a row beneath it. Density contrast is a comparison, and a comparison that requires scrolling is not one. Side by side, the loose half and the dense half are one image. Stacked, they are two sections that happen to share a background, and the hero reads as a headline followed by a list. The index-across variation exists because that other reading is genuinely right on some pages, not because it is the same design at a different width.
It survives colourlessness. Every hairline is currentColor, which cannot blank, needs no chain and no slug a theme might not define, and lands exactly as dark as the type beside it: ink on paper in a light theme, pale on ink in a dark one. The only two colours in the pattern are a base chain for the ground and a contrast chain for every piece of type, and both slugs are in the universal set, so the density contrast arrives in a theme with twelve palette slugs and in a theme with two.
What it inherits, what it decides
Inherits: every colour (a base chain for the ground, a contrast chain for all type, currentColor for all five hairlines and the action's underline), the typeface, and the spacing scale (spacing|60 between the two halves when they stack, spacing|40 under the eyebrow and the headline, spacing|30 inside every index entry, spacing|20 between a numeral and its title).
Decides: the 1240px measure and the clamp gutters; the 30rem measure on the headline half, held with a nested constrained group rather than a padding-right, which on a direct child of a constrained band gives the right width and the wrong position; the 27rem rail, stated as a width on the second column with the first column left width-less so core's flex-basis:0; flex-grow:1 gives it the remainder rather than two percentages fighting over a gutter; the type ramp, 13px tracked caps to 68px display to 12px numerals; and the 1px hairline, which is a per-side group border on each entry and never a core/separator, because Twenty Twenty-Four narrows any separator that is not is-style-wide to a centred 100px stub and a stub under a rail entry would read as a mistake in exactly one of the two themes buyers actually run.
The action is a core/button styled flat, not a text link. A plain <a> in a paragraph is repainted by the theme's a:where(:not(.wp-element-button)) rule, which on the inverted variation is often contrast on contrast: ratio 1.0 with nothing to warn you, because the colour the element actually has is the theme's, applied last. A button anchor with a transparent background, border-radius:0 and no side padding can carry its own chain, and the underline is the border-bottom of the group around it in currentColor. The button carries no typography attribute: core/button moved its typography styles from the outer div to the inner <a> between 6.6 and 7.0, so one is valid at 7.0 and flagged as unexpected content in the 6.6 editor.
What happens at 390px293 words
Core stacks core/columns below 782px, so the band becomes eyebrow, headline, lede, the four entries, then the action. Four dense entries on a phone is a lot of page before the action, and that is a real cost that was designed around rather than ignored. Three things pay it down:
- The entries are authored tight. A numeral, a one-word title and one line of description, deliberately under about 45 characters so it stays one or two lines at a phone measure. Each entry lands at roughly 96px, so the whole index is about 400px: one screen of a phone, not three. Write longer descriptions and you lose this, which is the one thing to be careful about when you edit the copy.
- The hairlines stack into a ledger. In the rail the entries are separated by their own top borders with the last one closed by a bottom border; stacked, that is exactly the shape a contents list wants on a phone anyway, five rules and four rows. Nothing has to change and nothing looks like a desktop layout that fell over.
- The action is still at the end, on purpose. A visitor who has read four section titles knows what the page holds, and the action reads as "start here" rather than as a demand made before anything was offered. It is a hero and an index at once; on a phone it is an index that opened with a headline.
The headline's clamp(2.5rem, 5vw, 4.25rem) bottoms out at 40px, where "Every book crosses four rooms." runs to two lines on a 350px measure. Every incidental label is floored with max() at 12px or above, so nothing in the index falls under the readable floor when the viewport does.
What a buyer changes first133 words
The four entries, and they are the point. Retitle them to the four sections below this hero and rewrite the four description lines to say what each section answers, keeping each under about 45 characters. Then the numerals, if the page has five sections or three: an entry is one core/group with a top border, so adding or removing one is a copy of a block, and the last entry in the rail is the only one that also carries a bottom border.
Then the headline. It is set on a 30rem measure at up to 68px, which is about fourteen characters a line, so it wants roughly thirty characters in total. Longer than about forty and it runs to four lines and swamps the rail it is supposed to be lighter than.
Variations166 words
- Night index: the colour axis, done the only way the contract guarantees. The band inverts to a
contrastchain and the eyebrow, headline, lede, index and action all become abasechain. Both slugs exist in every stock block theme, unlike a tinted wash, and the five hairlines need no edit at all becausecurrentColorfollows the type. Same composition, same density contrast, read at night. - Index across: the other arrangement of the same content. The headline keeps its 30rem measure at the top of the band and the four entries run four-across beneath it, each under its own top hairline, with one continuous bottom hairline on the group around the row so the band closes. The density contrast becomes vertical rather than lateral: one loose block of type, then a ruled strip of four. At 390 it stacks to the same ledger as the base, which is why the two variations of this pattern differ on a desktop and agree on a phone.
Measured25 words
The base and both variations each take every colour and typeface from the theme. All three were checked in the editor, rendered and looked at.
The markup
Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks.
Fetching the markup…Variation: Index across
Fetching the markup…Variation: Night index
Fetching the markup…