# Hero index

> An opening that doubles as a table of contents: a tracked eyebrow and one display headline held to a 30rem measure, and beside it 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. Its signature is density contrast, one loose statement against four dense ruled entries, so the section opens the page and names what is on it in the same breath. 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.html
Section: Hero
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 7.0 to 7.1. 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

## Variations (2)

### Index rail (the default)

Identical markup in every theme.

The index runs as a rail down the right, so the loose half and the dense half are in the eye at the same time and the contrast between them is the composition rather than a sequence. On a phone the two halves stack, headline first, and the action closes the index.

### Night index

Identical markup in every theme.

The colour axis, done the only way the contract guarantees: the band inverts to your contrast and the eyebrow, headline, index and action are all your base. The hairlines need no change at all, because they are currentColor and follow whatever the theme paints text with.


---

## 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 separate
`hero-index-row` pattern 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 happens at 390px

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 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 versions, so markup
carrying one does not stay valid across editor versions.

## What a buyer changes first

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.

## The variation

- **Night index**: the colour axis, done the only way the contract guarantees.
  The band inverts to a `contrast` chain and the eyebrow, headline, lede, index
  and action all become a `base` chain. Both slugs exist in every stock block
  theme, unlike a tinted wash, and the five hairlines need no edit at all
  because `currentColor` follows the type. Same composition, same density
  contrast, read at night.

## Measured

The base and the variation each take every colour and typeface from the theme.
Both were checked in the editor, rendered and looked at.