Pattern Paste
Subscribe

Core Patterns Hero

FreeStandard

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

Loading patterns…

Theme
Preview size
Look
Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

Start here

What to change first

  1. The statement. It is the entire pattern.
  2. The two button labels and their links. Both ship without a URL.
  3. The meta line. One line, terse, uppercase.
  4. 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

  1. 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.
  2. 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.
  3. 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.
  4. 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.

The markup

Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks. This is the file as authored; the copy button on the stage applies the finish you chose there.

4,315 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"padding":{"top":"clamp(6.5rem, 14vw, 12.5rem)","bottom":"clamp(6.5rem, 14vw, 12.5rem)","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:clamp(6.5rem, 14vw, 12.5rem);padding-right:var(--wp--preset--spacing--50);padding-bottom:clamp(6.5rem, 14vw, 12.5rem);padding-left:var(--wp--preset--spacing--50)"><!-- wp:group {"layout":{"type":"constrained","contentSize":"820px"}} -->
<div class="wp-block-group"><!-- wp:heading {"textAlign":"center","level":1,"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--xx-large, clamp(2.875rem, 7.6vw, 6rem))"}}} -->
<h1 class="wp-block-heading has-text-align-center" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--xx-large, clamp(2.875rem, 7.6vw, 6rem))">Every section, already set in your type.</h1>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"clamp(2.75rem, 4.5vw, 4rem)","bottom":"0"}}},"layout":{"type":"constrained","contentSize":"4.5rem"}} -->
<div class="wp-block-group" style="margin-top:clamp(2.75rem, 4.5vw, 4rem);margin-bottom:0"><!-- wp:group {"style":{"border":{"top":{"color":"currentColor","width":"2px","style":"solid"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:2px"></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:paragraph {"align":"center","style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"clamp(2rem, 3.2vw, 2.75rem)","bottom":"0"}},"typography":{"fontSize":"clamp(0.9375rem, 1vw, 1rem)","fontWeight":"600","letterSpacing":"0.22em","textTransform":"uppercase"}}} -->
<p class="has-text-align-center has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:clamp(2rem, 3.2vw, 2.75rem);margin-bottom:0;font-size:clamp(0.9375rem, 1vw, 1rem);font-weight:600;letter-spacing:0.22em;text-transform:uppercase">Sections for block themes. No plugin required.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"clamp(2.75rem, 4.5vw, 4rem)","bottom":"0"},"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"center"}} -->
<div class="wp-block-buttons" style="margin-top:clamp(2.75rem, 4.5vw, 4rem);margin-bottom:0"><!-- wp:button {"style":{"spacing":{"padding":{"top":"1.05rem","bottom":"1.05rem","left":"2.25rem","right":"2.25rem"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="padding-top:1.05rem;padding-right:2.25rem;padding-bottom:1.05rem;padding-left:2.25rem">Browse the catalogue</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"color":{"background":"transparent","text":"var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"border":{"width":"1px","color":"currentColor"},"spacing":{"padding":{"top":"1.05rem","bottom":"1.05rem","left":"2.25rem","right":"2.25rem"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background has-border-color wp-element-button" style="border-color:currentColor;border-width:1px;color:var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));background-color:transparent;padding-top:1.05rem;padding-right:2.25rem;padding-bottom:1.05rem;padding-left:2.25rem">See how it adapts</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Variation: Flush left
4,279 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"padding":{"top":"clamp(6.5rem, 14vw, 12.5rem)","bottom":"clamp(6.5rem, 14vw, 12.5rem)","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:clamp(6.5rem, 14vw, 12.5rem);padding-right:var(--wp--preset--spacing--50);padding-bottom:clamp(6.5rem, 14vw, 12.5rem);padding-left:var(--wp--preset--spacing--50)"><!-- wp:group {"layout":{"type":"constrained","contentSize":"820px","justifyContent":"left"}} -->
<div class="wp-block-group"><!-- wp:heading {"level":1,"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--xx-large, clamp(2.875rem, 7.6vw, 6rem))"}}} -->
<h1 class="wp-block-heading" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--xx-large, clamp(2.875rem, 7.6vw, 6rem))">Every section, already set in your type.</h1>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"clamp(2.75rem, 4.5vw, 4rem)","bottom":"0"}}},"layout":{"type":"constrained","contentSize":"4.5rem","justifyContent":"left"}} -->
<div class="wp-block-group" style="margin-top:clamp(2.75rem, 4.5vw, 4rem);margin-bottom:0"><!-- wp:group {"style":{"border":{"top":{"color":"currentColor","width":"2px","style":"solid"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:2px"></div>
<!-- /wp:group --></div>
<!-- /wp:group -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"clamp(2rem, 3.2vw, 2.75rem)","bottom":"0"}},"typography":{"fontSize":"clamp(0.9375rem, 1vw, 1rem)","fontWeight":"600","letterSpacing":"0.22em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:clamp(2rem, 3.2vw, 2.75rem);margin-bottom:0;font-size:clamp(0.9375rem, 1vw, 1rem);font-weight:600;letter-spacing:0.22em;text-transform:uppercase">Sections for block themes. No plugin required.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"clamp(2.75rem, 4.5vw, 4rem)","bottom":"0"},"blockGap":"var:preset|spacing|30"}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"left"}} -->
<div class="wp-block-buttons" style="margin-top:clamp(2.75rem, 4.5vw, 4rem);margin-bottom:0"><!-- wp:button {"style":{"spacing":{"padding":{"top":"1.05rem","bottom":"1.05rem","left":"2.25rem","right":"2.25rem"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="padding-top:1.05rem;padding-right:2.25rem;padding-bottom:1.05rem;padding-left:2.25rem">Browse the catalogue</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"color":{"background":"transparent","text":"var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"border":{"width":"1px","color":"currentColor"},"spacing":{"padding":{"top":"1.05rem","bottom":"1.05rem","left":"2.25rem","right":"2.25rem"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background has-border-color wp-element-button" style="border-color:currentColor;border-width:1px;color:var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));background-color:transparent;padding-top:1.05rem;padding-right:2.25rem;padding-bottom:1.05rem;padding-left:2.25rem">See how it adapts</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Back to Core Patterns

Continue exploring

Next in Hero

Explore all 32 Hero patterns

Hero stack rules rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Hero tint wash rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Hero, two covers rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo plugin needed

Hero, two covers

An opening built from two identical photograph frames side by side with a hairline gutter between them.

HeroPreview pattern