# 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. Canonical: https://patternpaste.com/pattern/hero-measure.html Section: Hero Access: Included in Pattern Paste access. Needs: 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. Blocks: button, buttons, group, heading, paragraph Keywords: hero, measure, asymmetry, left-justified, headline, lede, text link ## Variations (3) ### Measure (the default) Identical markup in every theme. Your base as the ground and your contrast as the type. Everything sits in one left-justified stack: the headline runs wide, the lede is held to a short reading measure under it, and the action is a text link on a hairline rule that follows the type in currentColor. ### Centred measure Identical markup in every theme. The same two mismatched measures, centred in the band instead of left-justified, so the headline flares symmetrically past the lede rather than running ragged to the right. The composition changes and no promise does. ### Night measure Identical markup in every theme. The colour axis by inversion: your contrast becomes the ground and your base every piece of type, and the rule under the action follows the type because it is currentColor. Both slugs exist in every block theme, so the inversion arrives everywhere. Nothing else moves. --- ## 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. ## 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. ## What to change first 1. **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. 2. **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. 3. **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. 4. **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. 5. **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. ## 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.