# Index across

> An opening that doubles as a table of contents, read as a row rather than as a rail: a tracked eyebrow, one display headline held to a 30rem measure and a lede under it, then four numbered entries four-across beneath, each under its own currentColor hairline with one continuous rule closing the strip, and a flat action below. The density contrast runs vertically, one loose block of type against a ruled strip of four, so the hero names the four sections below it as a row of doors. The four entries are meant to be the four sections below. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/hero-index-row.html
Section: Hero
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: button, buttons, column, columns, group, heading, paragraph
Keywords: hero, index, contents, numbered, table of contents, long page, opener

Promise: Identical markup in every theme.

---

## The signature moment: the ruled strip under the statement

One loose block of type, then four dense entries in a strip across the foot of
the band. The headline is a 68px line on a 480px measure with air around it and
two things beside it; the strip below is four entries, twelve lines of type and
five rules, in the full 1240px. Neither half is decorated, and 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 the eye gets both in one
downward sweep.

**The strip is ruled twice, and the two rules are not the same rule.** Each
entry carries its own `border-top`, so the line above the row is broken at every
gutter and the four entries read as four columns of a table. The line that
closes the strip is a single `border-bottom` on the group holding the row, so it
runs the full measure unbroken. Broken above, continuous below: that is what
makes four columns read as one strip rather than as four stacked cards, and it
is two border declarations, not a graphic.

**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, both slugs in the universal set, so
the composition arrives in a theme with twelve palette slugs and in a theme with
two.

## What happens at 390px

Core stacks `core/columns` below 782px, so the band becomes eyebrow, headline,
lede, the four entries one after another, then the action. Each entry keeps its
own top rule and the strip keeps its closing rule, which is exactly the shape a
contents list wants on a phone anyway: five rules and four rows, a ledger. The
row arrangement and the rail arrangement of this content therefore agree on a
phone and differ on a desktop, which is the honest way round.

The entries are authored tight for it. A numeral, a one-word title and one line
of description under about 45 characters, so each entry lands at roughly 96px
and the whole index is about 400px: one screen of a phone, not three. Write
longer descriptions and you lose that, which is the one thing to be careful
about when you edit the copy. The headline's `clamp(2.5rem, 5vw, 4.25rem)`
bottoms out at 40px, and every incidental label is floored with `max()` at 12px
or above, so nothing falls under the readable floor when the viewport does.

## What it inherits, what it decides

Inherits: every colour (a `base` chain for the ground, a `contrast` chain for
all type, `role-label` for the eyebrow and the numerals falling through to
`contrast`, `currentColor` for all five hairlines and the action's underline),
the typeface, and the spacing scale (`spacing|70` between the statement and the
strip, `spacing|50` above the action, `spacing|40` under the eyebrow and the
headline, `spacing|30` inside every entry, `spacing|20` between a numeral and
its title).

Decides: the 1240px measure and the `clamp(1.25rem, 4vw, 4rem)` gutters; the
30rem measure on the headline, 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 four equal columns, stated as no width at all
so core's `flex-basis:0; flex-grow:1` shares the row evenly and a long title
wraps inside its own column rather than pushing its neighbours about; the
`clamp(1.5rem, 3vw, 2.5rem)` gutter between them; the type ramp, 13px tracked
caps to 68px display to 12px numerals; and the 1px hairline, which is a per-side
group border and never a `core/separator`, because Twenty Twenty-Four narrows
any separator that is not `is-style-wide` to a centred 100px stub.

**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 can be an accent on an accent: a ratio nothing warns you about,
because the colour the element actually has is the theme's, applied last. A
button anchor with a transparent background and no side padding carries 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 a buyer changes first

1. **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.
2. **The numerals, if the page has three sections or five.** An entry is one
   `core/group` with a top border inside one `core/column`, so adding or
   removing one is a copy of a block. Four is the number this composition is
   built for; at five the descriptions want to come down to four or five words,
   because five across at 1240px leaves roughly 220px an entry.
3. **The headline.** It is set on a 30rem measure at up to 68px, 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 strip it is
   supposed to be lighter than.
4. **The action.** One button, flat, under the strip. A visitor who has read
   four section titles knows what the page holds, so it reads as "start here"
   rather than as a demand made before anything was offered.