[Library] Hero

Catalogue accessStandard

Waitlist hero

A launch hero built around one oversized action: a short headline, a single line of copy, then a full-width button slab with a tiny reassurance line under it, and three small proof numerals on a ruled foot beneath that. The action is the second-largest element in the section, so the page reads as an invitation to join rather than as a general introduction. 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

An opening section for something that has not launched yet. It does one job: get the reader into the queue. A short headline, one line of copy, one action, and three small numbers standing as proof that other people are already in it.

The signature moment

The action is the second-largest thing in the section

Scale. In almost every hero the button is a small object hanging off the bottom of the type. Here it is a slab: it runs the full width of its own 26rem measure with 1.6rem of padding above and below the label, so after the headline it is physically the largest element on the section, larger than the line of copy and several times larger than the proof numerals under it.

That single decision is what makes this a launch hero rather than a general one. The reader's eye lands on the headline, falls to a filled block the size of a paragraph, and there is nothing else competing for the click. The tiny reassurance line sits directly beneath the slab, at a sixth of its weight, and the ruled foot of numerals is smaller again: the section is a hard ramp from one big statement to one big action to three small facts.

A pattern cannot ship a form. Nothing in this catalogue carries a script or a form, so the action is a plain core button and the section is honest about it: it links to your signup page, wherever that page lives (a form plugin, a mailing-list provider's hosted page, a separate landing page). Point the button at it and the hero is finished.

What it inherits from your theme

  • The typeface. No font family is stated anywhere. Serif theme or geometric sans, the headline, the button label and the numerals are all set in your face.
  • Your colours. The ground asks for base and the type asks for contrast, the two slugs every stock block theme defines; the action takes those two in reverse so it reads as the lit object on the page. If a theme defines neither, the section falls back to white and black and the relationship still holds.
  • Your spacing scale. The band's padding and the rhythm between the headline, the copy, the action and the foot are all spacing presets, so a theme with a generous scale gets a taller hero without you editing anything.
  • Your button's shape and states. Only the padding, the square corner and the two colours are stated. Hover, focus and the rest are your theme's.

What it decides for itself

  • Full bleed, own measure. The section spans the viewport and holds its content to 1240px, with the reading column inside that held to 46rem and aligned left. It is a hero, not another column of body text.
  • Left, not centred. The whole composition hangs off one left edge, so the headline, the slab and the first numeral line up. That vertical edge is what keeps a section this simple from reading as a placeholder.
  • The display ramp. The headline is a clamp() from 2.75rem to 4.75rem with negative tracking and a line-height just under 1, so it breaks into two or three tight lines rather than one long one.
  • The numerals stay in a row at every width. The proof columns are set not to stack on mobile: three small figures across a phone still read as a row of evidence, where stacked they would read as three more sections.
  • The foot rule is currentColor. It follows the text colour, so it cannot resolve to nothing and it inverts with the section.

What to change first

  1. The button's link. It ships without a URL, which is deliberate. Point it at your signup page before anything else; the pattern's whole shape is built around that one click.
  2. The headline. "Take a place in the queue." is built for five to eight words. Say what the reader is joining, not what your product does.
  3. The three numerals. They are the only claim the section makes, so make them true. A count on the list, a countdown, and a price of zero is one combination; signups, cities and days work as well. Keep each label under about twenty characters or it wraps on a phone.
  4. The reassurance line. One sentence under the slab, and its job is to remove the reason not to click. If you cannot promise what it says, delete it rather than soften it.
  5. The action's width. The slab is a button set to 100% inside a 26rem group. Widen the group to make the action heavier, or narrow it to about 20rem if your theme's button padding is already generous.
Notes142 words
  • Core blocks only: group, paragraph, heading, buttons, button, columns, column. No plugin, nothing to keep updated.
  • The button carries no typography attribute. That is a compatibility rule rather than a taste one: WordPress moved button typography styles from the outer element to the inner link, so a button carrying a font size is marked invalid in the older matrix version. Its label is set at your theme's button size, and the slab does its work through padding and width instead.
  • Every colour is a two-rung fallback chain ending on a colour WordPress itself guarantees, so nothing here can resolve to nothing.
  • The headline 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 same colour as its own band.
Back to the library

Continue exploring

Next in Hero

Explore all 18 Hero patterns