Cover plate: WordPress Block Pattern, Pattern Paste

Canonical: https://patternpaste.com/pattern/cover-plate.html

Core Patterns (https://patternpaste.com/patterns/) Cover (https://patternpaste.com/patterns/cover/)

Free Standard

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

## All patterns

Search patterns

Loading patterns…

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.

Theme handoff

## What comes from where

### Theme and pattern

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.

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 full-bleed core/cover on your own photograph, or your own clip, with a paper plate grown out of its bottom-left corner. The plate carries everything a visitor reads: an eyebrow, a headline and one line. The photograph carries nothing but atmosphere, under a 30% veil of your theme's contrast colour.

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

Make it yoursVariations and the edits to make first

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

Theme behaviourInheritance, fixed decisions and contrast

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

Technical notesBlock mechanics, responsive behaviour and constraints

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

### 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 (https://patternpaste.com/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment.

Questions

## Cover plate: common questions

Does Cover plate need a plugin?

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

Will Cover plate match my theme?

Choose by variation. Paper plate, In motion and Ink plate take your theme’s palette; Folio and White and jade bring its own colours.

How many variations does Cover plate have?

5: Paper plate, Folio, In motion, Ink plate and White and jade. Each is its own markup; choose one in the toolbar above the preview before you copy.

Can I use my own images?

Yes. Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library.

Is Cover plate free?

Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. Its Styled looks come with a subscription.

Back to Core Patterns (https://patternpaste.com/patterns/)

### Free pattern

Copy it and paste it straight into the block editor. It is yours to keep and edit.

Its Styled looks come with a subscription.

Read the markup

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

Hero 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. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)Editorial Article footer The close of an article: a portrait of the author beside their name, the biography under both inside a currentColor slip held to the middle half of the measure, and the previous and the next post hanging off the two outer edges so the section reads as a doorway rather than a footer. The name, the biography and the two neighbours are dynamic core blocks, so they are the post's own and the preview here is sample data; the portrait is an ordinary image block you swap for your author's own. The previous and next links only resolve on a single post template, which is where this pattern belongs. (https://patternpaste.com/pattern/article-footer.html)Call to action Callout response clock A call-out section where the day is drawn to scale: a label, heading and a call button over one framed bar of three segments whose widths are their hours, 8am to 6pm, 6pm to midnight and midnight to 8am. Each segment carries its hours, how long we take to arrive at display size and the call-out fee under a hairline, and one line under the bar gives the hourly rate after that. On a phone the bar stacks into three rows that still name their hours. States no colour and no font of its own. (https://patternpaste.com/pattern/callout-response-clock.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/)

Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/).

## Specifications

Section

Cover

Access

Free

Plugin

None, core blocks only

Variations

5

Colour

From your theme or its own palette

Type

From your theme or its own type

Motion

None

Blocks

cover, group, heading, paragraph

Presets

color 5, font-size 2, spacing 3

WordPress

7.0+

Continue exploring

## Next in Cover

Explore all 16 Cover patterns (https://patternpaste.com/patterns/cover/)Also in Page header (https://patternpaste.com/patterns/page-header/)

Shot in Twenty Twenty-Five Cover No plugin needed

### Cover mosaic

Five photographs as cover tiles locked into one bento grid: a large square, a tall portrait, two small tiles and a wide panorama, with an ink slab carrying the eyebrow, heading, lede and button in the sixth cell.

Cover Preview pattern (https://patternpaste.com/pattern/cover-mosaic.html)

Shot in Twenty Twenty-Five Cover No plugin needed

### Cover portholes

A tall full-bleed photograph with three large circular photographs of decreasing size centred on its lower edge, half on the picture and half on your theme's paper, each captioned below.

Cover Preview pattern (https://patternpaste.com/pattern/cover-portholes.html)

Shot in Twenty Twenty-Five Cover No plugin needed

### Cover seam stamp

Two full-height photographs side by side at full bleed with no gap: the left under a heavy veil of your theme's contrast colour carrying an eyebrow, display headline, lede and button, the right clean.

Cover Preview pattern (https://patternpaste.com/pattern/cover-seam-stamp.html)