# Cover plate

> A full-bleed cover on your own photograph with a paper plate grown out of its bottom-left corner carrying the eyebrow, headline and one line. The type never touches the image. Includes a replaceable example photograph. States no colour and no font of its own. Ships with a short hand-off row on your theme's paper below it, so the cover reads as a section and not the page.

Canonical: https://patternpaste.com/pattern/cover-plate.html
Section: Cover
Access: Free, and free to keep.
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: cover, group, heading, paragraph
Keywords: cover, photo, video, banner, page header, plate

## Variations (5)

### Paper plate (the default)

Identical markup in every theme.

The plate is your base, the type on it your contrast, and a 30% veil of your contrast sits on the photograph so the plate reads as laid on top. Flush with the corner at desktop, the full width of the phone.

### Folio

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

The Folio photographer set: the whole frame given to one mountain photograph under a light darkroom veil, a bone plate with a monospace frame caption behind a safelight rule and a Helvetica headline, and a bone row below offering the prints.

### In motion

Identical markup in every theme.

The same plate over a clip instead of a still. Choose a short, silent, looping video in the cover's media picker; the plate and the veil are unchanged, so the type is exactly as legible as it is on a photograph.

### Ink plate

Identical markup in every theme.

The plate inverts: your contrast as the ground, your base as the type. The same corner, more weight, for a photograph that is mostly light.

### White and jade

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

A clinic look: states a white plate edged in jade over the photograph, deep navy type and a pale jade hand-off row, set in Avenir Next throughout. A jade Book an appointment button sits beside a tap-to-call link on the plate.


---

## The signature moment: the plate grows out of the corner

The cover has no padding of its own, so the plate sits flush with the bottom
edge of the section and at your theme's own gutter from the left: a museum
label laid on the bottom corner of a print, with the photograph running past
it on two sides. (The constrained wrapper picks up the theme's root padding,
which is why the gutter is the theme's and not ours.) On a phone the plate
takes the width between the gutters and the photograph becomes a tall band
above it. The plate is held to `clamp(36rem, 45vw, 42rem)` by a constrained wrapper
with `justifyContent: left`, never by padding on the plate itself: 36rem at
1280 and below, growing with the window to 42rem, so the label keeps its
proportion against the photograph instead of thinning to a strip on a wide
screen.

## The rule this pattern is the worked example of

**Type never sits on a photograph.** A photograph's luminance is unknowable,
exactly like an accent's, and the buyer swaps the image anyway. So every word
here is on a plate whose ground is a `base` chain and whose type is a
`contrast` chain, and it measures as type on a guaranteed pair: 21:1 in every
theme tested at every width, on WordPress 7.0.
The veil over the photograph is decoration; it may recede without loss.

## What it inherits, what it decides

Inherits: every colour (the plate is `base`, its type `contrast`, the veil
`contrast` at 30%), the typeface, the spacing scale. Decides: the proportion
of the type (a 13px tracked eyebrow, a headline from 32px to 56px at 1.02
line-height and -0.03em, a 15px to 17px line at 1.6), the plate's width and
padding, the cover's 38rem minimum height, and the element order.

The cover states its own text colour (`base`) so that core's `:where()` rule,
which would otherwise paint any text in it `#fff`, never fires. Nothing sits
outside the plate today; the chain is there so nothing a buyer adds does
either without a colour of its own.

## What a buyer changes first

The photograph. The cover includes an example photograph: choose Replace, select an image from the media library, and the focal
point tool does the rest. The plate's eyebrow is the second thing; it is set
in caps with wide tracking and reads best under 28 characters.

## Variations

- **Ink plate**: the plate inverts, `contrast` ground and `base` type. Same
  corner, more weight, for a photograph that is mostly light.
- **In motion**: `backgroundType: "video"`. The same plate over a clip. The
  cover remains empty for your own clip (an empty video cover is valid in the editor
  and saves as the veil over the inner container); choose a short, silent,
  looping clip in the cover's media picker. Core writes the `<video>` with
  `autoplay muted loop playsinline`, which is what iOS requires to play
  inline without a gesture. Nothing about the type changes, so it is exactly
  as legible over a clip as over a still.

## Why the height is in rem

The cover's `minHeight` is `38rem`, never a `vh` value. The preview on this page
sizes its frame to the pattern, and a viewport-relative height would size the
pattern to the frame in turn; measured on the stage, that loop only ever
shrinks. `rem` also means the section is the same height in every theme at a
given root size, which is what a buyer placing it above other sections wants.

## Measured

The cover's serialisation on WordPress 7.0, the element order it is authored in,
the contrast rule for type that does sit on a cover (this pattern never
triggers it), and the render of this pattern and its variations in four themes
at three widths.

## The hand-off row

A full-bleed cover on its own fills the preview on this page edge to edge, and
on a buyer's page it is never alone either. So the pattern ships with what
comes next: a short row on your theme's paper under the cover, a tracked
label and one paragraph at a 34rem measure. Its 1240px wrapper carries
`justifyContent: left`, so the row hangs off the same gutter as the plate
above it at every width instead of centring away from it once the window
passes about 1350. It is ordinary page copy, it shows where the cover ENDS, and it is the first thing a buyer rewrites or
deletes. It carries the same chains as everything else.

## Included images

The copied markup includes WordPress Photo Directory example photographs. The public image URLs
keep the examples visible after pasting. Select an image or cover and choose
**Replace** to use your own Media Library files. See [image credits](/image-credits/)
for the sources and licenses. Pasting an image URL does not import a Media Library
attachment.
