Hero stack rules: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/hero-stack-rules.html Core Patterns (https://patternpaste.com/patterns/) Hero (https://patternpaste.com/patterns/hero/) Catalogue access Standard # Hero stack rules An opening section ruled like a ledger: three full-measure bands divided by currentColor hairlines, a tracked eyebrow and a date on the top line, the headline alone in the tall middle band at up to 104px, and a lede with two actions on the closing line. The headline is a row in a table rather than a statement floating in air. ## All patterns Search patterns Loading patterns… Start here ## What you change first - The eyebrow and the date. Keep both under about 30 characters so the top row stays one line on a desktop. - The headline. Ten words or fewer; it is the only thing in its band and it should fill two or three lines at 1400. - The lede. One or two sentences. - The two buttons. The second is an outline in currentColor; delete it and the first stays at the right of the row. The signature moment ## A structural mark The hero is ruled like a ledger, so the headline is a row in a table rather than a statement floating in air. Four hairlines run the full 1240px measure and never stop short of it; the headline sits between two of them with nothing else in its band, and its size is decided by the band rather than by the space around it. The move is that a hero normally has no edges at all, and this one is boxed on every horizontal line, which makes the sentence read as an entry rather than as an announcement. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - Every rule. - Button hover and focus. - Spacing rhythm. ### Set by this pattern - The four hairlines - The headline - The eyebrow and the date - The lede measure - Square buttons 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 full-bleed opening section built as three stacked bands inside a 1240px measure, each band divided from the next by a hairline that runs the whole measure: a thin metadata line, the headline alone in a tall band, and a lede with two actions on the closing line. Everything is a core/group, core/heading, core/paragraph or core/buttons. ### The signature moment: a structural mark The hero is ruled like a ledger, so the headline is a row in a table rather than a statement floating in air. Four hairlines run the full 1240px measure and never stop short of it; the headline sits between two of them with nothing else in its band, and its size is decided by the band rather than by the space around it. The move is that a hero normally has no edges at all, and this one is boxed on every horizontal line, which makes the sentence read as an entry rather than as an announcement. Make it yoursVariations and the edits to make first ### What you change first - The eyebrow and the date. Keep both under about 30 characters so the top row stays one line on a desktop. - The headline. Ten words or fewer; it is the only thing in its band and it should fill two or three lines at 1400. - The lede. One or two sentences. It is capped at 34rem, so more than about forty words makes the closing row taller than the top row by a lot. - The two buttons. The second is an outline in currentColor; delete it and the first stays at the right of the row. ### The variations - Night ledger (night-ledger-rules) is the colour axis by inversion: contrast becomes the ground and base the type. The hairlines need no edit, because currentColor follows the type. Nothing else moves. - Doubled rules (rules-doubled) is a composition change. The headline is split across two bands with a hairline between them, at clamp(2.75rem, 6vw, 5.25rem) so each half holds one line at 1400, and the ledger reads as four rows. The second half is a core/paragraph at the heading's size rather than a second h1, so the section still has exactly one first-level heading. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Typeface. No family is stated. The headline was drawn to hold at 1.0 in a serif face and a sans one. - Palette. base ground, contrast text, both two-rung chains ending on a core default. The heading carries its colour explicitly, because a theme's heading element style beats an inherited group colour. - Every rule. currentColor, so they are the text colour wherever the theme puts it, and they cannot blank. - Button hover and focus. wp-element-button takes whatever your theme does. - Spacing rhythm. Core spacing presets for the rows; the middle band's air is a clamp(), because that band is the composition. ### What it decides for itself - The four hairlines and the fact that the section is closed top and bottom. - The headline: clamp(3rem, 7.5vw, 6.5rem), weight 700, -0.04em, 1.0. - The eyebrow and the date: max(0.8125rem, 13px), weight 600, 0.2em tracking, uppercase. Incidental labels, so a preset floor is enough, and the px guard holds them at 13 whatever the root size does. - The lede measure: 34rem, at clamp(1.0625rem, 1.35vw, 1.25rem) on 1.55. - Square buttons: border-radius: 0, because a rounded corner in a ruled band reads as a different section. ### Contrast Every pair is your contrast on your base, or the inverse in the night variation. The headline is large text and clears 3:1; the eyebrow, the date, the lede and both buttons are held to 4.5:1. The filled button is base on contrast, which is the same pair inverted. The hairlines carry no text. No accent slug appears in any rung. ### Display type Off the theme's ladder on purpose, because the size is the composition: - h1 at clamp(2.75rem, 6vw, 5.25rem) - paragraph at clamp(2.75rem, 6vw, 5.25rem) Technical notesBlock mechanics, responsive behaviour and constraints ### Rules: group borders, not separators Every hairline is a border-top (and one border-bottom) on the band's own core/group, in currentColor at 1px. It is not a core/separator, for two reasons. - Twenty Twenty-Four narrows separators. Its theme.json caps any separator that is not is-style-wide, is-style-dots, alignwide or alignfull to var(--wp--preset--spacing--60), so a rule authored to span the measure renders as a centred 100px stub and nothing warns you. is-style-wide fixes that, and footer-ledger chose the border instead because a group's own style.border is not touched by the theme rule at all. A signature that depends on the rules reaching the full measure should not depend on remembering a class name. - A border is the band's edge, not a sibling. The rule and the band's padding are one block, so the gap above and below each hairline is stated once and cannot drift; with separators the spacing lives in a third block between two others and every band's air is authored twice. currentColor means the rules follow whatever the theme sets the text to, which is what makes the inverted variation free. ### How the rows work The outer band is align:full with its own constrained layout at 1240px and blockGap: 0, so the bands butt and each hairline is a single line rather than a doubled one. - Top row. A flex group, flexWrap: wrap, justifyContent: space-between, verticalAlignment: center: the eyebrow at the left edge, the date and place at the right, on one line. It wraps to two short lines on a phone rather than compressing, because WordPress writes selfStretch: fixed as flex-basis with no flex-shrink: 0, so a fixed item in a nowrap row breaks mid-word instead of moving. - Middle row. A constrained group holding the h1 and nothing else, with clamp(2.25rem, 5vw, 4rem) of padding above and below. The headline runs the full 1240px measure at clamp(3rem, 7.5vw, 6.5rem), weight 700, -0.04em tracking, line-height 1.0. - Bottom row. The same flex shape as the top row. The lede is wrapped in a nested core/group whose constrained layout is contentSize: 34rem and justifyContent: left, which holds it to about 70 characters without a padding-right trick; the buttons sit at the right. On a phone the row wraps and the buttons land under the lede. ### What happens at 390 The headline floors at 48px on a 1.0 line height, which is about four lines for this length of copy; keep a replacement under about ten words. Both flex rows wrap, so the eyebrow, the date, the lede and the buttons each take their own line, and the hairlines still run the measure because they are the band's own edge and the band is as wide as the column. Buttons are 1rem of vertical padding on a 16px line, comfortably over 44px. Questions ## Hero stack rules: common questions Does Hero stack rules need a plugin? No. It is built only from core WordPress blocks (button, buttons, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Hero stack rules 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 stack rules have? 3: Ruled, Night ledger and Doubled rules. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Hero stack rules 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. 6.3KB of core-block markup, 5 blocks (button, buttons, 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 3 Colour From your theme Type From your theme Motion None Blocks button, buttons, group, heading, paragraph Presets color 6, spacing 3, font-size 2 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 slab over still Two full-bleed slabs stacked on one hard edge: an inverted band carrying an eyebrow, a display headline on a 32rem measure and two buttons, and beneath it a full-bleed picture that carries no type at all. Hero Preview pattern (https://patternpaste.com/pattern/hero-slab-over-still.html) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero statement An opening section with nothing in it but the sentence: one statement set at extreme display size on a narrow measure, a short rule under it, a single tracked meta line, and two actions. Hero Preview pattern (https://patternpaste.com/pattern/hero-statement.html) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero tint wash A full-bleed photographic opener with exactly three things on it: one two-word headline at up to 128px, a 12px tracked line sitting straight underneath it, and one button. Hero Preview pattern (https://patternpaste.com/pattern/hero-tint-wash.html)