Hero flex row: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/hero-flex-row.html Core Patterns (https://patternpaste.com/patterns/) Hero (https://patternpaste.com/patterns/hero/) Catalogue access Standard # 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. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The headline. Keep it under about forty characters. - 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. - How many facts. Three or five work; the row does not care. - The eyebrow and the action. Both ship without URLs. - The band's height. Top and bottom padding are clamp(4.5rem, 10vw, 8.5rem). 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. Theme handoff ## What comes from where ### From your theme - Your typeface. - Your colours. - Your spacing scale. - Your button styling. ### Set by this pattern - The row. - The two widths. - Fixed does not mean rigid. - The headline. - The facts. - Full bleed with its own measure. 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 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. Make it yoursVariations and the edits to make first ### What to change first - The headline. Keep it under about forty characters. It is the loose half of the density contrast, and the contrast is what you bought. - 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. - 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. - 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. - 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. Theme behaviourInheritance, fixed decisions and contrast ### 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. Technical notesBlock mechanics, responsive behaviour and constraints ### 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. Questions ## Hero flex row: common questions Does Hero flex row need a plugin? No. It is built only from core WordPress blocks (button, buttons, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Hero flex row 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 flex row have? 3: Flex row, Night row and Facts first. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Hero flex row free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. Which WordPress version does it need? 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. 9.8KB of core-block markup, 5 blocks (button, buttons, group, heading, 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/) ## 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, group, heading, paragraph Presets color 6, font-size 2, spacing 4 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 ### Editorial still life An editorial hero with an offset object photograph, copy, a second small still and native story disclosure. Hero Preview pattern (https://patternpaste.com/pattern/hero-editorial-still-life.html) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero horizon band A coastal-stay opening with a broad opaque title band set across a bright full-width photograph. Hero Preview pattern (https://patternpaste.com/pattern/hero-horizon-band.html) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero index An opening that doubles as a table of contents: a tracked eyebrow and one display headline held to a 30rem measure, and beside it a ruled index of four numbered entries, each a tracked numeral, a short title and one line of description, closed top and bottom by currentColor hairlines. Hero Preview pattern (https://patternpaste.com/pattern/hero-index.html)