Hero statement: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/hero-statement.html Core Patterns (https://patternpaste.com/patterns/) Hero (https://patternpaste.com/patterns/hero/) Free Standard # Hero statement An opening section with nothing in it but the sentence: one statement set at extreme display size on a narrow measure, a short rule under it, a single tracked meta line, and two actions. The band's own vertical air is stated rather than inherited, so the statement holds the screen on its own. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The statement. It is the entire pattern. - The two button labels and their links. Both ship without a URL. - The meta line. One line, terse, uppercase. - The air, if your page is dense. The band's padding clamp is the signature, so change it knowingly: dropping the ceiling to about 8rem turns this into an ordinary hero, which may be exactly what a busy page needs. The signature moment ## Extreme air The signature is the air, and the air is stated rather than inherited. The band's vertical padding is clamp(6.5rem, 14vw, 12.5rem) top and bottom, so on a wide screen roughly two thirds of the section is empty and the statement is the only thing on it. Everything else in the pattern is deliberately small: the rule is 4.5rem wide, the meta line is one tracked line, the actions are two ordinary buttons. Nothing competes, because there is nothing to compete with. Theme handoff ## What comes from where ### From your theme - The typeface. - Both colours. - The rule and the outline button. - Button shape and states. - Horizontal rhythm. ### Set by this pattern - The air. - The measure. - The display ramp. - Full bleed. - Contrast intent. 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 full-bleed opening section with one sentence in it. No image, no lede, no column of supporting facts: a statement at display size on a narrow measure, a short rule, one tracked meta line and two actions. ### The signature moment: extreme air The signature is the air, and the air is stated rather than inherited. The band's vertical padding is clamp(6.5rem, 14vw, 12.5rem) top and bottom, so on a wide screen roughly two thirds of the section is empty and the statement is the only thing on it. Everything else in the pattern is deliberately small: the rule is 4.5rem wide, the meta line is one tracked line, the actions are two ordinary buttons. Nothing competes, because there is nothing to compete with. That is why the padding is not a spacing preset. Presets are the theme's scale and they are used everywhere else in this catalogue on purpose, but a theme with a tight scale would quietly turn the signature into an ordinary hero, and the failure would look like a design decision rather than a missing one. The horizontal padding and the gaps between the buttons still come from your scale. The second half of the moment is scale collision, held to two sizes only. The statement runs up to 6rem with negative tracking and a line-height under 1; the meta line under it is 15 to 16px, uppercase, tracked at 0.22em. Nothing of an intermediate size sits between them, and the 4.5rem rule is what marks the jump. Make it yoursVariations and the edits to make first ### The variation Flush left. One structural change and nothing else: the measure moves from the centre of the band to its left edge. The rule stops being an ornament under the statement and becomes a mark at the start of the line, and the actions sit under the text's left edge instead of under its middle. Same colours, same type, same air. Use the centred base when the section opens a page that is itself centred, and flush left when the rest of the page hangs off a left edge. ### What to change first - The statement. It is the entire pattern. Keep it to six to nine words: this ramp is built for three lines, and a statement that runs to five lines stops being a statement. - The two button labels and their links. Both ship without a URL. The first is filled with your contrast, the second is an outline in currentColor. If the section only has one thing to ask for, delete the second button; the composition survives it. - The meta line. One line, terse, uppercase. It is the only place in the section to put a qualifier, so put the qualifier a visitor would otherwise ask about. - The air, if your page is dense. The band's padding clamp is the signature, so change it knowingly: dropping the ceiling to about 8rem turns this into an ordinary hero, which may be exactly what a busy page needs. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. The pattern states no font family anywhere. The statement is set in your heading face and the meta line in whatever your theme.json gives a paragraph. - Both colours. The ground asks for base and the type asks for contrast, each a fallback chain ending on a colour WordPress itself guarantees, so nothing here can resolve to nothing. The heading states its own text colour rather than inheriting the group's, because a theme's heading element style beats an inherited colour and that is how a headline ends up the colour of its own band. - The rule and the outline button. Both are currentColor, so they follow your text wherever your theme puts it. They cannot blank and they cannot clash. - Button shape and states. The buttons carry wp-element-button and no typography of their own, so hover, focus and radius are yours. - Horizontal rhythm. Side padding and the gap between the two buttons are core spacing presets, which your theme rescales. ### What it decides for itself - The air. As above: the one thing the theme does not get a vote on. - The measure. The statement is held to 820px inside a 1240px band, so it breaks into three strong lines instead of one long one. It is a nested constrained group, not padding on the heading, so the measure is the same whichever side of the band it sits on. - The display ramp. clamp(2.875rem, 7.6vw, 6rem), tracking -0.04em, line-height 0.95. A display size needs its own line-height; your theme's is tuned for body copy. - Full bleed. The section spans the viewport and holds its own content width rather than inheriting your body measure. - Contrast intent. The statement is large text and aims at the 3:1 bar; the meta line and both button labels are ordinary text and aim at 4.5:1. Both pairs are base against contrast, which is the only pair every stock block theme defines. Measure it in your own theme before you ship: a chain guarantees a colour, not a particular one. Technical notesBlock mechanics, responsive behaviour and constraints ### Notes - Core blocks only: group, heading, paragraph, buttons, button. No plugin, nothing to keep updated. - The short rule is an empty group with a 2px currentColor top border inside a 4.5rem constrained group, not a core/separator. A separator that is not is-style-wide is narrowed to a spacing preset by some themes, so its length is not yours to decide; a group border is. - Nothing in the section stacks, so it reads the same way at 390 as at 1400. Only the clamps move. Questions ## Hero statement: common questions Does Hero statement 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 statement 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 statement have? 2: Centred and Flush left. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Hero statement free? Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. 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. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Read the markup #### 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 Free Plugin None, core blocks only Variations 2 Colour From your theme Type From your theme Motion None Blocks button, buttons, group, heading, paragraph Presets color 6, spacing 2, font-size 1 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 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) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero tint wash A full-bleed photographic opener with exactly three things on it: one two-word headline at up to 128px, a 12px tracked line sitting straight underneath it, and one button. Hero Preview pattern (https://patternpaste.com/pattern/hero-tint-wash.html) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero, two covers An opening built from two identical photograph frames side by side with a hairline gutter between them. Hero Preview pattern (https://patternpaste.com/pattern/hero-two-covers.html)