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

Canonical: https://patternpaste.com/pattern/hero-waitlist.html
Section: Hero
Access: Included in Pattern Paste access.
Needs: 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.
Blocks: button, buttons, column, columns, group, heading, paragraph
Keywords: hero, waitlist, launch, signup, beta, coming soon

## Variations (2)

### Paper queue (the default)

Identical markup in every theme.

Your base as the ground, your contrast as the type, and the action as a hard slab of your contrast colour running the width of its own measure. The foot rule is currentColor, so it follows your text wherever your theme puts it.

### Night queue

Identical markup in every theme.

The colour axis, inverted: the whole section flips to your contrast with your base on it, and the action flips back to your base so it still reads as the lit thing on the band. Every theme defines both slugs, so this arrives everywhere.


---

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

## Notes

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