Hero index: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/hero-index.html Core Patterns (https://patternpaste.com/patterns/) Hero (https://patternpaste.com/patterns/hero/) Catalogue access 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. 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. ## All patterns Search patterns Loading patterns… 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. Theme handoff ## What comes from where ### Theme and pattern 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 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 between versions, so markup carrying one does not stay valid across editor versions. 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 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 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. Make it yoursVariations and the edits to make first ### 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. 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, 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 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 between versions, so markup carrying one does not stay valid across editor versions. 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, 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 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. ### 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. Questions ## Hero index: common questions Does Hero index need a plugin? No. It is built only from core WordPress blocks (button, buttons, column, columns, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Hero index match my theme? Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted. How many variations does Hero index have? 2: Index rail and Night index. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Hero index free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. Which WordPress version does it need? 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. 13KB 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. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (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. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. 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 Appointment letter checklist What to bring to a first appointment, set as the confirmation letter itself: a card with the booking's details written into ruled blanks (date, time, who, where, length and fee) and a checklist of empty squares to tick the night before, beside a short introduction. States no colour and no font of its own. (https://patternpaste.com/pattern/appointment-letter-checklist.html)Stats Arisings recycled figures A figures section on an inverted slab where one number carries it: a percentage set at display size over a heading that finishes the sentence and a short note, beside a tall photograph. Under it three ruled tiles break the figure down, each a large percentage, a heading and a line, with a second photograph as the fourth tile. Four across on a wide screen, two on a tablet, one on a phone. States no colour and no font of its own. (https://patternpaste.com/pattern/arisings-recycled-figures.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 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. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section Hero Access Subscription Plugin None, core blocks only Variations 2 Colour From your theme Type From your theme Motion None Blocks button, buttons, column, columns, group, heading, paragraph Presets color 6, font-size 2, spacing 4 WordPress 7.0+ Continue exploring ## Next in Hero Explore all 32 Hero patterns (https://patternpaste.com/patterns/hero/) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero horizon band A coastal-stay opening with a broad opaque title band set across a bright full-width photograph. Hero Preview pattern (https://patternpaste.com/pattern/hero-horizon-band.html) Shot in Twenty Twenty-Five Hero No plugin needed ### 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. Hero Preview pattern (https://patternpaste.com/pattern/hero-index-row.html) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero invitation card A wedding hero that is the invitation itself: a full-bleed photograph under a light veil carrying a centred double-ruled card in the order a printed invitation keeps, the families line, the two names stacked around an italic ampersand, the invitation line, the date and time, the venue, a hairline and an RSVP button beside a text link. Hero Preview pattern (https://patternpaste.com/pattern/hero-invitation-card.html)