Waitlist hero: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/hero-waitlist.html Core Patterns (https://patternpaste.com/patterns/) Hero (https://patternpaste.com/patterns/hero/) Catalogue access Standard # 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. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The button's link. It ships without a URL, which is deliberate. - The headline. "Take a place in the queue." is built for five to eight words. - The three numerals. They are the only claim the section makes, so make them true. - The reassurance line. One sentence under the slab, and its job is to remove the reason not to click. - The action's width. The slab is a button set to 100% inside a 26rem group. 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. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. - Your button's shape and states. ### Set by this pattern - Full bleed, own measure. - Left, not centred. - The display ramp. - The numerals stay in a row at every width. - The foot rule is currentColor. 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 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. Make it yoursVariations and the edits to make first ### What to change first - 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. - 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. - 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. - 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. - 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. Theme behaviourInheritance, fixed decisions and contrast ### 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. Technical notesBlock mechanics, responsive behaviour and constraints ### 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. Questions ## Waitlist hero: common questions Does Waitlist hero need a plugin? No. It is built only from core WordPress blocks (button, buttons, column, columns, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Waitlist hero 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 Waitlist hero have? 2: Paper queue and Night queue. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Waitlist hero free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 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. 8.1KB of core-block markup, 7 blocks (button, buttons, column, columns, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Features Appointment letter checklist What to bring to a first appointment, set as the confirmation letter itself: a card with the booking's details written into ruled blanks (date, time, who, where, length and fee) and a checklist of empty squares to tick the night before, beside a short introduction. States no colour and no font of its own. (https://patternpaste.com/pattern/appointment-letter-checklist.html)Stats Arisings recycled figures A figures section on an inverted slab where one number carries it: a percentage set at display size over a heading that finishes the sentence and a short note, beside a tall photograph. Under it three ruled tiles break the figure down, each a large percentage, a heading and a line, with a second photograph as the fourth tile. Four across on a wide screen, two on a tablet, one on a phone. States no colour and no font of its own. (https://patternpaste.com/pattern/arisings-recycled-figures.html)Compare Compact comparison rows A mobile-first responsive comparison layout using stacked capability cards: each row pairs a feature title and summary with a side-by-side comparison block, avoiding horizontal table scrolling on small screens. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-compact-rows.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section Hero Access Subscription Plugin None, core blocks only Variations 2 Colour From your theme Type From your theme Motion None Blocks button, buttons, column, columns, group, heading, paragraph Presets color 5, spacing 7, font-size 3 WordPress 7.0+ Continue exploring ## Next in Hero Explore all 32 Hero patterns (https://patternpaste.com/patterns/hero/)Also in Call to action (https://patternpaste.com/patterns/cta/) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero, two covers An opening built from two identical photograph frames side by side with a hairline gutter between them. Hero Preview pattern (https://patternpaste.com/pattern/hero-two-covers.html) Shot in Twenty Twenty-Five Hero No plugin needed ### Split hero An asymmetric hero with a headline, supporting copy and actions in one top-aligned column, beside a compact four-row facts panel. Hero Preview pattern (https://patternpaste.com/pattern/split-hero.html) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. Hero Preview pattern (https://patternpaste.com/pattern/hero-aperture.html)