# 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. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/hero-plate-on-paper.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, group, heading, paragraph
Keywords: hero, plate, card, page header, inverted, call to action

## Variations (5)

### Ink plate (the default)

Identical markup in every theme.

The plate is your contrast colour and its type your base, centred in the paper band with the mount showing on all four sides, down to 390.

### Mend

This variation states its own colours and states its own type: identical in every theme.

The Mend physio set: a deep teal plate on the clinical white page, an apricot label, clinical white type, a white 6px-corner button and an underlined link, all in Avenir Next.

### Moss and cream

This variation states its own colours and states its own type: identical in every theme.

States a moss plate on cream paper, with a Georgia headline and a pale green action that picks up the eyebrow.

### Paper plate

Identical markup in every theme.

The colour axis by inversion: the band becomes ink and the plate becomes paper, so the mount inverts rather than the card. Same composition, opposite reading.

### Offset plate

Identical markup in every theme.

The composition changes: the plate stops being centred and sits flush to the left of the band, with the whole margin of paper falling on its right.


---

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

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

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

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

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