[Library] Hero

Catalogue accessStandard

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. The image block ships empty; you choose the photograph. States no colour and no font of its own.

Variation View
Before you copy
Open in a new window

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

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

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.

Column widths, and why only one is stated80 words

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 390px113 words

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 first181 words

The photograph. The image block ships EMPTY, which is what WordPress writes before a file is chosen and is valid at 6.6 and 7.0: click the frame and pick from the 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.

Variations159 words
  • 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.
Back to the library

Continue exploring

Next in Hero

Explore all 18 Hero patterns