# Hero right weight > A picture-led hero that reverses the usual hierarchy: the photograph takes the wide right column at a 4:3 crop and the words are a narrow 38% caption beside it, set small and hung from the same bottom line. The headline is deliberately smaller than a hero headline usually is, because the picture is doing the asserting. Example images are included and can be replaced in the editor. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/hero-right-weight.html Section: Hero Access: Included in Pattern Paste access. Needs: 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. Blocks: button, buttons, column, columns, group, heading, image, paragraph Keywords: hero, asymmetric, picture led, image, caption, editorial, split ## Variations (3) ### Picture right (the default) Identical markup in every theme. The photograph sits on the right at full weight and the eyebrow, headline, lede and one flat action are stacked against the left edge, bottom-aligned to the foot of the frame so the empty space opens above the words. On a phone the words come first and the picture follows. ### Night weight Identical markup in every theme. The colour axis, done the only way the contract guarantees everywhere: the band inverts to your contrast and every piece of type, including the action's rule, becomes your base. Identical composition and identical crop; the photograph is the only thing that keeps its own light. ### Mirrored weight Identical markup in every theme. The same proportions with the composition flipped: the photograph takes the wide left column and the narrow caption sits on the right, aligned right so the type hangs off the outer edge. Choose it when the section that follows leads on the left. On a phone the picture comes first and the words follow it, which is the order the mirror implies. --- ## The signature moment: asymmetry, reversed Every split hero in this library puts its weight on the left, gives the type the wide measure and lets the picture support it from the right. **This one inverts the hierarchy: the picture is the subject and the words are its caption.** The mechanism is a headline that refuses to compete. At 1400px it tops out at 44px against a frame roughly 690px wide and 517px tall, and the whole type column is 38% of the measure. Read the section quickly and you read the photograph; read it slowly and you find a caption explaining it. That is the idea, and it only exists while the imbalance does. **Do not scale the headline up to balance the composition.** A hero headline set at hero size beside a picture this large is a different, ordinary pattern, and the two halves then argue instead of one deferring to the other. Two mechanics serve the signature and are not it. The columns are bottom-aligned (`verticalAlignment: "bottom"` written on **each `core/column`** as well as on `core/columns`, because the columns-level class is overridden by core's own `align-items: normal !important` on the front end), so the caption sits at the foot of the frame and the void it leaves is above the words rather than under them. And the action is a flat `core/button` on a transparent ground with a 2px `currentColor` rule beneath it, shrink-wrapped by a flex group so the rule is exactly as wide as the words. A plain `` in a paragraph would have been repainted by the theme's link rule and would be invisible on the inverted variation; a button anchor can carry its own explicit chain. It survives colourlessness because it is made of proportion: 38% against the rest, a 4:3 crop against a 44px headline, and a shared bottom edge. Nothing here depends on a hue, and the argument is the same in a serif theme and a sans one. ## Column widths, and why only one is stated The narrow column states `width: "38%"`; the picture column states no width at all. Core writes a stated width as `flex-basis` and a width-less column as `flex-basis: 0; flex-grow: 1`, so the picture takes whatever is left after the gap instead of two stated percentages plus a gutter exceeding 100% and both columns shrinking proportionally away from the numbers on the page. The 38% is therefore real, and the picture is whatever 38% leaves, which is what the signature needs. ## What happens at 390px Core stacks `core/columns` below 782px, so the bottom alignment has nothing left to act on and the void closes. **In the base and in Night weight the words come first and the picture follows**: the caption becomes an introduction, which is the honest reading once nothing is beside anything. **In Mirrored weight the picture comes first and the words follow it**, because that is the order the mirror puts them in and it is the one case where the phone keeps the section's argument intact: picture, then caption. Nothing offsets, laps or overlaps on the way down; the composition is built from column widths and alignment only, so the stack is a stack. ## What it inherits, what it decides Inherits: every colour (the band is a `base` chain, all three pieces of type and the action are a `contrast` chain, the rule under the action is `currentColor`, and there is no accent anywhere), the typeface, and the spacing scale (`spacing|70` above and below the band, `spacing|50` between the stacked columns, `spacing|30` between the pieces of type, `spacing|40` above the action). Decides: the 38% caption, the 4:3 crop, the shared bottom edge, the 1240px measure with `clamp(1.25rem, 4vw, 4rem)` gutters, the `clamp(1.5rem, 3.4vw, 3.5rem)` gap between caption and frame, and a type ramp of exactly three sizes: a 13px tracked eyebrow, the 28px to 44px headline, and a 15px to 17px lede. Each piece of type states its own text colour rather than inheriting the band's, because a theme's heading element style beats an inherited group colour. ## What a buyer changes first The photograph. **The image block includes an example photograph**; choose Replace to select an image from your media library. It carries `"scale": "cover"` with a stated `aspectRatio`, so whatever is uploaded is cropped to 4:3 rather than changing the proportion the design is made of. Choose a picture that can carry a section on its own; a detail shot will look like a thumbnail at this size. Then the headline, which wants two lines in a 38% column at desktop and is drawn for about 60 characters. Longer runs to four lines and starts to look like a paragraph in a headline's clothes; much shorter leaves the caption floating under too much air. The eyebrow reads best under about 25 characters, and the lede should stay at two sentences: it is a caption, not a body. If the picture feels too dominant for a particular photograph, change the aspect ratio to `3/2`, which shortens the frame without touching the type. Do not widen the caption column instead. ## Variations - **Mirrored weight** (`weight-mirrored`): the composition flips. The photograph takes the wide left column, the 38% caption moves to the right and its type aligns right so it hangs off the outer edge. Same proportions, same crop, same colours; only the composition moves, which is the one axis a variation is allowed to change. Take it when the section below leads on the left, or when the photograph's subject faces right. - **Night weight** (`night-weight`): the colour axis, done by inversion, which is the only colour move that arrives in every theme since `base` and `contrast` are the only universal slugs. The band becomes your `contrast` and every piece of type, plus the rule under the action, becomes your `base`. The composition, the crop and the type ramp are byte-for-byte the base's; the photograph is the only thing that keeps its own light, which is why this one suits a darker or higher-contrast image than the paper version does. ## Included images The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select an image or cover and choose **Replace** to use your own Media Library files. See [image credits](/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment.