[Library] Hero

Catalogue accessStandard

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. The headline is a row in a table rather than a statement floating in air. 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 built as three stacked bands inside a 1240px measure, each band divided from the next by a hairline that runs the whole measure: a thin metadata line, the headline alone in a tall band, and a lede with two actions on the closing line. Everything is a core/group, core/heading, core/paragraph or core/buttons.

The signature moment

A structural mark

The hero is ruled like a ledger, so the headline is a row in a table rather than a statement floating in air. Four hairlines run the full 1240px measure and never stop short of it; the headline sits between two of them with nothing else in its band, and its size is decided by the band rather than by the space around it. The move is that a hero normally has no edges at all, and this one is boxed on every horizontal line, which makes the sentence read as an entry rather than as an announcement.

What it inherits from your theme

  • Typeface. No family is stated. The headline was drawn to hold at 1.0 in a serif face and a sans one.
  • Palette. base ground, contrast text, both two-rung chains ending on a core default. The heading carries its colour explicitly, because a theme's heading element style beats an inherited group colour.
  • Every rule. currentColor, so they are the text colour wherever the theme puts it, and they cannot blank.
  • Button hover and focus. wp-element-button takes whatever your theme does.
  • Spacing rhythm. Core spacing presets for the rows; the middle band's air is a clamp(), because that band is the composition.

What it decides for itself

  • The four hairlines and the fact that the section is closed top and bottom.
  • The headline: clamp(3rem, 7.5vw, 6.5rem), weight 700, -0.04em, 1.0.
  • The eyebrow and the date: max(0.8125rem, 13px), weight 600, 0.2em tracking, uppercase. Incidental labels, so a preset floor is enough, and the px guard holds them at 13 whatever the root size does.
  • The lede measure: 34rem, at clamp(1.0625rem, 1.35vw, 1.25rem) on 1.55.
  • Square buttons: border-radius: 0, because a rounded corner in a ruled band reads as a different section.

What you change first

  1. The eyebrow and the date. Keep both under about 30 characters so the top row stays one line on a desktop.
  2. The headline. Ten words or fewer; it is the only thing in its band and it should fill two or three lines at 1400.
  3. The lede. One or two sentences. It is capped at 34rem, so more than about forty words makes the closing row taller than the top row by a lot.
  4. The two buttons. The second is an outline in currentColor; delete it and the first stays at the right of the row.
Rules: group borders, not separators177 words

Every hairline is a border-top (and one border-bottom) on the band's own core/group, in currentColor at 1px. It is not a core/separator, for two reasons.

  1. Twenty Twenty-Four narrows separators. Its theme.json caps any separator that is not is-style-wide, is-style-dots, alignwide or alignfull to var(--wp--preset--spacing--60), so a rule authored to span the measure renders as a centred 100px stub and nothing warns you. is-style-wide fixes that, and footer-ledger chose the border instead because a group's own style.border is not touched by the theme rule at all. A signature that depends on the rules reaching the full measure should not depend on remembering a class name.
  2. A border is the band's edge, not a sibling. The rule and the band's padding are one block, so the gap above and below each hairline is stated once and cannot drift; with separators the spacing lives in a third block between two others and every band's air is authored twice.

currentColor means the rules follow whatever the theme sets the text to, which is what makes the inverted variation free.

How the rows work191 words

The outer band is align:full with its own constrained layout at 1240px and blockGap: 0, so the bands butt and each hairline is a single line rather than a doubled one.

  • Top row. A flex group, flexWrap: wrap, justifyContent: space-between, verticalAlignment: center: the eyebrow at the left edge, the date and place at the right, on one line. It wraps to two short lines on a phone rather than compressing, because WordPress writes selfStretch: fixed as flex-basis with no flex-shrink: 0, so a fixed item in a nowrap row breaks mid-word instead of moving.
  • Middle row. A constrained group holding the h1 and nothing else, with clamp(2.25rem, 5vw, 4rem) of padding above and below. The headline runs the full 1240px measure at clamp(3rem, 7.5vw, 6.5rem), weight 700, -0.04em tracking, line-height 1.0.
  • Bottom row. The same flex shape as the top row. The lede is wrapped in a nested core/group whose constrained layout is contentSize: 34rem and justifyContent: left, which holds it to about 70 characters without a padding-right trick; the buttons sit at the right. On a phone the row wraps and the buttons land under the lede.
What happens at 39082 words

The headline floors at 48px on a 1.0 line height, which is about four lines for this length of copy; keep a replacement under about ten words. Both flex rows wrap, so the eyebrow, the date, the lede and the buttons each take their own line, and the hairlines still run the measure because they are the band's own edge and the band is as wide as the column. Buttons are 1rem of vertical padding on a 16px line, comfortably over 44px.

The variations94 words
  • Night ledger (night-ledger-rules) is the colour axis by inversion: contrast becomes the ground and base the type. The hairlines need no edit, because currentColor follows the type. Nothing else moves.
  • Doubled rules (rules-doubled) is a composition change. The headline is split across two bands with a hairline between them, at clamp(2.75rem, 6vw, 5.25rem) so each half holds one line at 1400, and the ledger reads as four rows. The second half is a core/paragraph at the heading's size rather than a second h1, so the section still has exactly one first-level heading.
Contrast61 words

Every pair is your contrast on your base, or the inverse in the night variation. The headline is large text and clears 3:1; the eyebrow, the date, the lede and both buttons are held to 4.5:1. The filled button is base on contrast, which is the same pair inverted. The hairlines carry no text. No accent slug appears in any rung.

Display type24 words

Off the theme's ladder on purpose, because the size is the composition:

  • h1 at clamp(2.75rem, 6vw, 5.25rem)
  • paragraph at clamp(2.75rem, 6vw, 5.25rem)
Back to the library

Continue exploring

Next in Hero

Explore all 18 Hero patterns