Pattern Paste
Subscribe

Core Patterns Hero

Catalogue accessStandard

Hero plate on paper

A hero that is a card laid on the page rather than the page's own top edge: a full-bleed band of your theme's paper with generous air on all four sides, holding one inset plate of your contrast colour that carries the whole hero, eyebrow, headline, lede and two buttons.

No photograph and no cover; the authority comes from the ink ground and the paper around it.

All patterns

Loading patterns…

Theme
Preview size
Look

Takes your theme’s colours and type.

Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

The signature moment

The hero is a card ON the page, not the page's top edge

The plate is the entire section and the paper around it is a mount, so the hero reads as something placed on the site rather than as the site's own first surface. Nothing else in this catalogue does that: the covers lay a plate on a photograph, and this lays one on nothing at all, which is why the composition has to carry it. The paper stays visible on all four sides at every width, including 390, where the band's clamp(1.25rem, 4vw, 4rem) side padding is 20px of mount and the plate keeps its own 1.5rem of internal air.

Theme handoff

What comes from where

Theme and pattern

Inherits: every colour, the typeface, the spacing scale. Decides: the proportion (a 13px tracked eyebrow at 0.24em, the h1 from 40px to 76px at 1.02 line-height and -0.035em, a 16px to 18px lede at 1.6 on a 34rem measure), the plate's 60rem width, its padding, and the size of the mount around it.

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

A hero with no photograph and no cover in it. A full-bleed band of your theme's paper, with generous air on all four sides, holds ONE inset plate of your contrast colour, and the plate carries the whole hero: a tracked eyebrow, the h1, a lede on a 34rem measure and two buttons.

The signature moment: the hero is a card ON the page, not the page's top edge

The plate is the entire section and the paper around it is a mount, so the hero reads as something placed on the site rather than as the site's own first surface. Nothing else in this catalogue does that: the covers lay a plate on a photograph, and this lays one on nothing at all, which is why the composition has to carry it. The paper stays visible on all four sides at every width, including 390, where the band's clamp(1.25rem, 4vw, 4rem) side padding is 20px of mount and the plate keeps its own 1.5rem of internal air.

The authority is entirely in the ink ground and the air around it. There is no rule, no accent, no image and no ornament anywhere in the pattern.

Make it yoursVariations and the edits to make first

Variations

  • Moss and cream: a moss plate on cream paper, a Georgia headline, and a pale green eyebrow and primary action. The copy and layout stay fixed.
  • Paper plate: the colour axis, by inversion. The band becomes ink and the plate becomes paper with ink type, so the MOUNT inverts rather than the card. Same composition, opposite reading, and the only colour move that arrives intact in every theme, because base and contrast are the only universal slugs.
  • Offset plate: the composition, not the colour. The plate stops being centred and sits flush to the left of the band inside a 50rem wrapper with justifyContent: left, so the whole remaining margin of paper falls on its right and the mount is asymmetric. Below 782px it is identical to the base, because the wrapper is already narrower than the screen.
Theme behaviourInheritance, fixed decisions and contrast

What it inherits, what it decides

Inherits: every colour, the typeface, the spacing scale. Decides: the proportion (a 13px tracked eyebrow at 0.24em, the h1 from 40px to 76px at 1.02 line-height and -0.035em, a 16px to 18px lede at 1.6 on a 34rem measure), the plate's 60rem width, its padding, and the size of the mount around it.

Technical notesBlock mechanics, responsive behaviour and constraints

Colour, and the trap this pattern is built around

Every colour is a two-rung chain: base → white for the paper and for the type on the plate, contrast → black for the plate's ground and for the band's own text. The plate states its own text colour AND every heading inside it states its own again, because a theme's heading element style beats an inherited group colour: that is exactly how a headline ends up the same colour as the ink it sits on, at ratio 1.0, with nothing to flag it.

Both buttons are chained for an ink ground and both cases were considered. The solid one is paper with ink type, so it is the brightest thing in the section. The outline one is transparent with base type and a 1px currentColor border, so the rule follows the plate's own text colour and cannot blank; on a paper plate (the paper-plate variation) the same two buttons invert with the plate, ink solid and an ink hairline, and neither one is ever an outline in the same colour as its ground.

No plain <a> appears in any paragraph here. A text link is repainted by the theme's a:where(:not(.wp-element-button)) rule, which on an ink plate is routinely ink on ink; both actions are core/button anchors so they can carry an explicit chain. Neither button carries a typography attribute, which does not stay valid across editor versions; they are sized with padding.

Why there is no hand-off row

A cover needs one because its bottom edge is the edge of a photograph and the page has to be shown continuing past it. Here the mount IS the hand-off: the band's paper runs past the plate on all four sides in the buyer's own base colour, so the section already shows where it ends and what the page under it is made of. Adding a row below the plate would put a second thing in a pattern whose whole idea is that there is one.

What a buyer changes first

The headline and the two button labels. After that, the mount: widen the band's top and bottom padding and the card floats further from whatever sits above it; narrow it and the plate starts behaving like a full-bleed band instead, which is the thing this pattern exists not to be.

Questions

Hero plate on paper: common questions

Does Hero plate on paper need a plugin?

No. It is built only from core WordPress blocks (button, buttons, group, heading and paragraph), so it pastes into the block editor with nothing to install.

Will Hero plate on paper match my theme?

Choose by variation. Ink plate, Paper plate and Offset plate take your theme’s palette; Mend and Moss and cream bring its own colours.

How many variations does Hero plate on paper have?

5: Ink plate, Mend, Moss and cream, Paper plate and Offset plate. Each is its own markup; choose one in the toolbar above the preview before you copy.

Is Hero plate on paper 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.

The markup

5.4KB of core-block markup, 5 blocks (button, buttons, 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 yearWhat you copy is yours forever. Not for you? We refund within 14 days.

Back to Core Patterns