[Library] Hero

Catalogue accessStandard

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. 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 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.

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.

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.
The variation88 words

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.

Notes85 words
  • 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.
Back to the library

Continue exploring

Next in Hero

Explore all 18 Hero patterns