Hero measure

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 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.

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.

• 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.

• 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.

• 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.