Hero measure, Pattern Paste Canonical: https://patternpaste.com/pattern/hero-measure.html Library (https://patternpaste.com/patterns/) Hero (https://patternpaste.com/patterns/hero/) Catalogue access 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. The two left edges align and the two right edges deliberately do not, and the right of the band is left as paper. States no colour and no font of its own. Start here ## What to change first - The headline. Keep it long enough to need three lines at 44rem, because the overrun past the lede is the signature and one short line does not show it. - The lede. It is one sentence at 28rem. - The action. One link, no URL. - The band's height. The vertical padding clamp is the only thing between this and an ordinary hero. - The eyebrow. Two or three words. The signature moment ## Asymmetry with intent The headline deliberately overruns the measure its lede keeps. The h1 runs to 44rem and the paragraph beneath it is held to 28rem, so the two blocks share a left edge and disagree on the right by roughly a third of the headline's width. That mismatch is the entire design: nothing is centred, nothing is mirrored, and there is no right-hand rail to explain the empty half of the band away. The lede reads at a proper 60-to-70-character measure because it is short, and the headline reads as display type because it is not. Theme handoff ## What comes from where ### From your theme - The typeface - The palette. - The horizontal rhythm. - The action's type. ### Set by this pattern - The two measures - The band's air. - The type ramp. - The rule under the action. - The action's colour. 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 hero that lives in the left half of a full-width 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 hairline. The right of the band is paper and stays paper. Three versions: the base, one colour inversion and one centred recomposition. ### The signature moment: asymmetry with intent The headline deliberately overruns the measure its lede keeps. The h1 runs to 44rem and the paragraph beneath it is held to 28rem, so the two blocks share a left edge and disagree on the right by roughly a third of the headline's width. That mismatch is the entire design: nothing is centred, nothing is mirrored, and there is no right-hand rail to explain the empty half of the band away. The lede reads at a proper 60-to-70-character measure because it is short, and the headline reads as display type because it is not. The two measures are held with nested constrained groups, never with padding-right. A block is content-box, so padding on a direct child of a constrained band sits outside the layout's max-width: the block grows to the band's full width and centring then puts its left edge in the wrong place, about 144px left of its neighbours at 1400px. content-columns shipped exactly that and nothing flagged it, because a check measures a width. Both measures here are {"layout":{"type":"constrained","contentSize":"...","justifyContent": "left"}} on a wrapping core/group, which puts the left edges on top of each other by construction. Make it yoursVariations and the edits to make first ### What to change first - The headline. Keep it long enough to need three lines at 44rem, because the overrun past the lede is the signature and one short line does not show it. If your theme's heading face is wider than the stock ones, step the 4.8vw and the 3.875rem maximum down together rather than one of them. - The lede. It is one sentence at 28rem. Two sentences still work; a third turns the short measure into a column and the asymmetry stops reading as a decision. Leave the 28rem alone. - The action. One link, no URL. Two would need a second bordered group in the flex row and would start to look like a button pair, which is the composition this pattern is avoiding. - The band's height. The vertical padding clamp is the only thing between this and an ordinary hero. Step it down if your page already opens with a nav bar above it, but keep the top and bottom equal. - The eyebrow. Two or three words. It is set at 0.24em of tracking, so a long line of it runs past the lede's measure and competes with the headline. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface, for every line. No family is stated in any of the four. - The palette. The ground is your base and every piece of type is your contrast, each as a fallback chain ending on a colour WordPress itself guarantees, so nothing can resolve to nothing. - The horizontal rhythm. The gaps between the eyebrow, the headline, the lede and the action are spacing presets 40, 50 and 60 from your scale. - The action's type. It is a core/button anchor with no typography of its own, so its size and weight come from your theme's button styles. ### What it decides for itself - The two measures, 44rem and 28rem. They are the pattern. - The band's air. Vertical padding is clamp(4.5rem, 10vw, 8.5rem) and the container is 1240px, so on a wide screen the stack occupies a little under half of it. - The type ramp. The headline is clamp(2.25rem, 4.8vw, 3.875rem) at line-height: 1.04 and -0.035em; the lede is clamp(1.0625rem, 1.35vw, 1.1875rem) at 1.6; the eyebrow is max(0.875rem, 14px) at 0.24em of tracking. The eyebrow is the only preset- sized thing in the pattern, and it is a label rather than something read. - The rule under the action. It is a border-bottom in currentColor on a core/group, not a core/separator: a separator that is not is-style-wide is narrowed to a centred stub by Twenty Twenty-Four, and a rule that must be exactly as wide as its link cannot be a full-measure block anyway. The bordered group sits inside a flex group so it shrinks to the width of the words above it. - The action's colour. It is stated on the anchor rather than inherited, because WordPress emits its site link rule as a:where(:not(.wp-element-button)): a plain link inside a paragraph is repainted in the theme's link colour, which on the inverted variation is the colour of the ground. The anchor carries a transparent background, no radius and no side padding, so it is a text action and not a filled button. Technical notesBlock mechanics, responsive behaviour and constraints ### Notes - Core blocks only: group, heading, paragraph, buttons, button. - Every colour is a fallback chain ending on a colour WordPress guarantees, and every heading and paragraph carries its own text chain rather than inheriting the band's, because a theme's heading element style beats inheritance and that is how a headline ends up the same colour as its ground. - No payload declares an axis: colour, type and motion are all the default. - One variation, one axis. night-measure is colour by inversion: contrast becomes the ground, base becomes every piece of type, and the rule under the action follows because it is currentColor. measure-centred changes the composition only, keeping both measures and centring them so the headline flares either side of the lede instead of running ragged right. - Below 782px the band's horizontal padding falls to 1.25rem and both measures fall to the viewport, so the phone gets one stack and the asymmetry is a desktop and tablet idea. That is deliberate: at 390px there is no room for a wide measure to overrun a narrow one. - Contrast: every pair is your contrast on your base, or the reverse. The headline is large text and is claimed at 3:1; the eyebrow, the lede and the action are held to 4.5:1. Measured per host theme against the resolved values, not the authored chains. 4.9KB 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. 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, group, heading, paragraph Core only yes Chains 12, deepest 3 rungs currentColor yes color base, black, contrast, role-label, role-link, white font-size medium, xx-large spacing 40, 50, 60 Continue exploring ## Next in Hero Explore all 20 Hero patterns (https://patternpaste.com/patterns/hero/) 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 media and text A hero built on Media & Text rather than columns, so the photograph runs off the side of the screen while the words stay on the page's own measure. 6 blocks · 2 variations Open preview (https://patternpaste.com/pattern/hero-media-text.html) Media right (https://patternpaste.com/pattern/hero-media-text.html#variant=media-right)Night (https://patternpaste.com/pattern/hero-media-text.html#variant=night-media) Shot in Twenty Twenty-Five Hero Hero Standard ### Hero plate on paper A hero that is a card laid on the page rather than the page's own top edge: a full-bleed band of your theme's paper with generous air on all four sides, holding one inset plate of your contrast colour that carries the whole hero, eyebrow, headline, lede and two buttons. 5 blocks · 2 variations Open preview (https://patternpaste.com/pattern/hero-plate-on-paper.html) Paper plate (https://patternpaste.com/pattern/hero-plate-on-paper.html#variant=paper-plate)Offset plate (https://patternpaste.com/pattern/hero-plate-on-paper.html#variant=plate-offset)