# 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. Canonical: https://patternpaste.com/pattern/hero-flex-row.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, group, heading, paragraph Keywords: hero, flex, wrapping row, facts, stats, density, headline ## Variations (3) ### Flex row (the default) Identical markup in every theme. Your base as the ground and your contrast as the type. The headline block and the four facts share one bottom-aligned row, so the big loose thing and the small dense ones sit on the same line and the composition changes at every width instead of at one breakpoint. ### Night row Identical markup in every theme. The colour axis by inversion: your contrast becomes the ground and your base every piece of type, and the hairlines over the facts follow the type because they are currentColor. Both slugs exist in every block theme, so the inversion arrives everywhere. Nothing in the composition moves. ### Facts first Identical markup in every theme. The composition changes and no promise does: the four facts come first in the row and the headline last, so the section reads as evidence leading to a statement rather than a statement trailed by its evidence. On a phone that means the facts are read before the headline. --- ## 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. ## Notes - 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.