Hero right weight: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/hero-right-weight.html Core Patterns (https://patternpaste.com/patterns/) Hero (https://patternpaste.com/patterns/hero/) Catalogue access Standard # 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. ## All patterns Search patterns Loading patterns… 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. Theme handoff ## What comes from where ### Theme and pattern 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. 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 built the wrong way round on purpose. The photograph takes the wide right column at a 4:3 crop; the words take a narrow 38% column on the left and are set small, quiet and hung from the same bottom line as the frame, so the empty space opens above them. A tracked eyebrow, a headline at clamp(1.75rem, 3vw, 2.75rem), a two-sentence lede and one flat action, and nothing else. ### 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. Make it yoursVariations and the edits to make first ### 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. Theme behaviourInheritance, fixed decisions and contrast ### 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. Technical notesBlock mechanics, responsive behaviour and constraints ### 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 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. ### 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 (https://patternpaste.com/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment. Questions ## Hero right weight: common questions Does Hero right weight need a plugin? No. It is built only from core WordPress blocks (button, buttons, column, columns, group, heading, image and paragraph), so it pastes into the block editor with nothing to install. Will Hero right weight 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 right weight have? 3: Picture right, Night weight and Mirrored weight. Each is its own markup; choose one in the toolbar above the preview before you copy. Can I use my own images? Yes. Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Is Hero right weight free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 5.1KB of core-block markup, 8 blocks (button, buttons, column, columns, group, heading, image, 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/) Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/). ## 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, column, columns, group, heading, image, paragraph Presets color 6, spacing 4, 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 reel A full-bleed video cover, 44rem tall, with every word of it packed into the bottom-left corner: a tracked eyebrow, a display headline held to a measure that stays 26rem up to a 1300px window and opens to 38rem on a wide one, one line of orientation and two buttons. Hero Preview pattern (https://patternpaste.com/pattern/hero-reel.html) 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 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. Hero Preview pattern (https://patternpaste.com/pattern/hero-stack-rules.html)