[Library] Hero

Catalogue accessStandard

Hero flex row

A hero built on a wrapping flex row instead of columns: one loose 30rem block holding a tracked eyebrow, a display headline and a single ruled action, and beside it four small ruled facts, each a tracked label over a short value. Because it is flex and not columns, the row reflows continuously as the window narrows rather than stepping from two columns to one at 782px: the facts fall past the headline one at a time and finish as a pair of pairs beneath it. 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 that is one row and five things. On the left, a loose 30rem block: a tracked eyebrow, a display headline at clamp(2.5rem, 5vw, 4.5rem), and one action ruled with a currentColor underline. Beside it, four small facts, each a hairline over a tracked uppercase label over a short value. There are no columns anywhere in the pattern. The row is a core/group with {"layout":{"type":"flex","flexWrap":"wrap","verticalAlignment":"bottom"}}, and every child is a flex item in it.

The signature moment

Density contrast, produced by the layout itself

One large loose element and four small dense ones share a single wrapping row, so the section reads as a statement with its evidence packed against it, and the balance between the two changes continuously as the window narrows. That is what flex buys over columns, and it is the reason this pattern exists. A core/columns hero makes exactly one layout decision and makes it at 782px: above it you get two columns, below it you get a stack, and nothing happens in between. A wrapping flex row makes a decision at every width. The four facts drop past the headline one at a time as the space runs out, so a 1240px window, a 1024px window and an 820px window are three different compositions of the same markup rather than the same composition squeezed. Nothing about it depends on a colour, which is why it survives being handed to someone else's palette.

What it inherits from your theme

  • Your typeface. The eyebrow, the headline, the labels, the values and the action state no family. The headline is whatever your theme gives an h1, at a size this pattern chooses.
  • Your colours. The band asks for base and every mark on it asks for contrast, the two slugs every stock block theme defines, each with a fallback to a colour WordPress itself guarantees.
  • Your spacing scale. The gap between wrapped rows is spacing preset 50, the gap under each fact's hairline is preset 20, the headline's top margin is preset 40 and the action's is preset 60. A theme with a generous scale gets a looser hero without you editing anything.
  • Your button styling. The action is a core button with its background cleared and its text set back to the band's, so hover and focus are your theme's.

What it decides for itself

  • The row. A flex group, wrapping, bottom-aligned, with a horizontal gap of clamp(1.25rem, 2.2vw, 2.25rem). Bottom alignment is the half of the signature that is easy to miss: it puts the four values on the same line as the bottom of the headline block, so the dense side reads as a footing under the loose side rather than as a sidebar beside it.
  • The two widths. The headline block is a fixed flex item at 30rem; each fact is a fixed flex item at 8rem. Four facts plus their gaps come to about 41rem, so at 1400 the whole row fits on one line inside the 1240px measure with room to spare, and the wrap starts at about 1230.
  • Fixed does not mean rigid. WordPress writes a fixed child as flex-basis alone, with no flex-shrink: 0, so a flex item still shrinks once it is alone on a line. That is deliberate here: at 390 the 30rem headline block shrinks to the full width of the band instead of overflowing it, and the 8rem facts never shrink because two of them plus a gap always fit. The row wraps, so nothing is ever squeezed against something else.
  • The headline. clamp(2.5rem, 5vw, 4.5rem), weight 600, tracking -0.035em, line-height 1.02. It is short on purpose: in a 30rem column at 1400 it sets to three lines, and a longer sentence turns the loose side into a wall and kills the contrast the pattern is built on.
  • The facts. A 1px currentColor top border, spacing preset 20 beneath it, a label at max(0.75rem, 12px) with 0.16em tracking, and a value at clamp(1.5rem, 2.2vw, 1.875rem). The hairlines are the only decoration in the pattern and they follow the type, so they cannot resolve to nothing and cannot disagree with the palette.
  • Full bleed with its own measure. The band spans the viewport on your base colour and holds its content to 1240px.

What to change first

  1. The headline. Keep it under about forty characters. It is the loose half of the density contrast, and the contrast is what you bought.
  2. The four facts. Labels are the thing to watch: keep them to about ten characters, because a label that wraps to two lines inside its 8rem box lifts that fact's hairline above its neighbours' and the ragged top is visible. Values want six characters or fewer.
  3. How many facts. Three or five work; the row does not care. Five push the wrap up to about 1400, so a fifth fact usually means dropping the headline block to 26rem as well.
  4. The eyebrow and the action. Both ship without URLs. The action's underline is the wrapping group's own 2px bottom border in currentColor, not the link's, so restyling the button does not lose the rule.
  5. The band's height. Top and bottom padding are clamp(4.5rem, 10vw, 8.5rem). Step the maximum down if this is a hero above a section that also needs to be seen.
Notes224 words
  • Core blocks only: group, heading, paragraph, buttons, button. No columns, no separator (the hairlines are each group's own border), no plugin, nothing to keep updated.
  • Every colour is a fallback chain ending on a colour WordPress itself guarantees, so nothing here can resolve to nothing. The borders are currentColor and need no chain.
  • No promise axis is declared: colour, type and motion are all the default, so this pattern takes your palette and your typeface and carries no CSS or JavaScript of its own.
  • The headline carries its own explicit text colour rather than inheriting the band's, because a theme's h1 element style beats an inherited group colour.
  • Because there are no columns, core's 782px stack never fires. At 820 the row wraps once: the headline block and the first fact share the top line, the other three sit beneath them. At 390 the headline block takes a line to itself at the full width of the band, and the four facts follow as two rows of two, which is the densest the dense half ever gets and the clearest reading of the signature.
  • The reversed variation (row-reversed) keeps both chains and every size and changes only the order of the flex children, so on a phone the facts are read before the headline instead of after it.
Back to the library

Continue exploring

Next in Hero

Explore all 18 Hero patterns