Index across, Pattern Paste Canonical: https://patternpaste.com/pattern/hero-index-row.html Library (https://patternpaste.com/patterns/) Hero (https://patternpaste.com/patterns/hero/) Catalogue access Standard # 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. 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. Theme handoff ## What comes from where ### Theme and pattern 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 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 between 6.6 and 7.0, so one is valid at 7.0 and flagged as unexpected content in the 6.6 editor. Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview A tracked eyebrow, one display headline held to a 30rem measure and a short lede at the top of the band; beneath them four numbered entries running four-across, each a tracked numeral, a short title and one line of description, each opened by its own currentColor hairline and the whole strip closed by one continuous rule; then one flat action. The 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: 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. Theme behaviourInheritance, fixed decisions and contrast ### 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 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 between 6.6 and 7.0, so one is valid at 7.0 and flagged as unexpected content in the 6.6 editor. Technical notesBlock mechanics, responsive behaviour and constraints ### 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 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. - 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. - 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. - 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. 15KB of core-block markup, 7 blocks (button, buttons, column, columns, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Start free trial to copy (https://patternpaste.com/account/#plan) What you copy is yours forever. Cancel whenever. Back to the library (https://patternpaste.com/patterns/) Catalogue access ### £70 a year Save £50 Or £10 a month All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Start with three days of full access on sign-up, no card. Start free trial (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Features Feature alternating Four feature rows, each a 4:3 frame set against its copy, with the seam flipping side to side down the page. The hairline that closes each row runs only under the text half, so the rule changes sides with the picture and the section never squares up on one edge. Example images are included and can be replaced in the editor. States no colour and no font of its own. (https://patternpaste.com/pattern/feature-alternating.html)Stats Stat callout A high-impact framed spotlight plaque: a central marquee figure and bold executive statement sit above a ruled three-part corroboration shelf enclosed within the same 1px currentColor architectural frame. States no colour and no font of its own. (https://patternpaste.com/pattern/stat-callout.html)Compare Compact comparison rows A mobile-first responsive comparison layout using stacked capability cards: each row pairs a feature title and summary with a side-by-side comparison block, avoiding horizontal table scrolling on small screens. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-compact-rows.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) #### What's inside Blocks button, buttons, column, columns, group, heading, paragraph Core only yes Chains 36, deepest 3 rungs currentColor yes color base, black, contrast, role-label, role-link, white font-size medium, xx-large spacing 20, 30, 40, 50, 70 Continue exploring ## Next in Hero Explore all 20 Hero patterns (https://patternpaste.com/patterns/hero/) Shot in Twenty Twenty-Five Hero Hero Standard ### 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. 7 blocks · 1 variation Open preview (https://patternpaste.com/pattern/hero-index.html) Night index (https://patternpaste.com/pattern/hero-index.html#variant=night-index) Shot in Twenty Twenty-Five Hero Hero Standard ### Hero ledger A full-bleed opening section that doubles as a spec sheet: a display headline, a short lede and one action fill the left, while the right holds three ruled rows, each a tracked label over a value set large enough to read as content rather than fine print. 7 blocks · 1 variation Open preview (https://patternpaste.com/pattern/hero-ledger.html) Night ledger (https://patternpaste.com/pattern/hero-ledger.html#variant=night-ledger) Shot in Twenty Twenty-Five Hero Hero Standard ### Hero measure A hero held in the left half of a wide band: a tracked eyebrow, a headline running to a 44rem measure, a lede locked to 28rem under it, and one text action ruled with a currentColor underline. 5 blocks · 2 variations Open preview (https://patternpaste.com/pattern/hero-measure.html) Centred measure (https://patternpaste.com/pattern/hero-measure.html#variant=measure-centred)Night measure (https://patternpaste.com/pattern/hero-measure.html#variant=night-measure)