Cover ledger: WordPress Block Pattern, Pattern Paste

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

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

Catalogue access Standard

# Cover ledger

A full-bleed cover on your own photograph with nothing on it but a ledger of three paper plates flush along its foot: a number at display size, a small tracked label and one line on each, with the photograph showing through the gaps.

No headline on 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

## Density contrast, top against foot

The top three quarters of the section are empty photograph. The bottom quarter is packed: three numbers at 40px to 64px, three labels, three lines, all on paper, sitting on the edge like a row of labels pinned along the bottom of a print. There is no headline; the numbers are the headline. The plates have no margin below them and the cover has no padding, so the paper touches the foot of the section, and the gaps between plates (1.5rem in a row, 1rem stacked) are the only places the photograph is seen at the bottom.

Theme handoff

## What comes from where

### Theme and pattern

Inherits: every colour (plates base, type contrast, veil contrast at 40%), the typeface, the root padding that sets the gutter. Decides: the proportion of the type (numbers from 40px to 64px at line-height 1 and -0.035em, a 13px to 14px tracked uppercase label, a 15px to 16px line at 1.5), the plate padding, the gaps, the 34rem floor, and the element order. The numbers are paragraphs, not headings, so a theme's heading styles do not reach them and the page's outline is not three numbers.

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 nothing on the image and a ledger across its foot: three paper plates in a row, flush with the bottom edge, each carrying a number at display size, a small tracked label and one line. The photograph shows through the gaps between the plates and fills everything above them, under a 40% veil of your theme's contrast colour.

### The signature moment: density contrast, top against foot

The top three quarters of the section are empty photograph. The bottom quarter is packed: three numbers at 40px to 64px, three labels, three lines, all on paper, sitting on the edge like a row of labels pinned along the bottom of a print. There is no headline; the numbers are the headline. The plates have no margin below them and the cover has no padding, so the paper touches the foot of the section, and the gaps between plates (1.5rem in a row, 1rem stacked) are the only places the photograph is seen at the bottom.

Below 782px core stacks the columns. The stack stays flush with the foot, because the bottom alignment is carried by the wrapper and not by a viewport-dependent offset, and the photograph becomes a band above it: at least clamp(6rem, 12vw, 10rem) of image, more when the 34rem floor has room left over.

Make it yoursVariations and the edits to make first

### Variations

- Ink ledger: the plates invert, contrast ground and base type. The same ledger, more weight, for a photograph that is mostly light. The veil is unchanged.

- In motion: backgroundType: "video". The same ledger 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 plates changes.

Theme behaviourInheritance, fixed decisions and contrast

### What it inherits, what it decides

Inherits: every colour (plates base, type contrast, veil contrast at 40%), the typeface, the root padding that sets the gutter. Decides: the proportion of the type (numbers from 40px to 64px at line-height 1 and -0.035em, a 13px to 14px tracked uppercase label, a 15px to 16px line at 1.5), the plate padding, the gaps, the 34rem floor, and the element order. The numbers are paragraphs, not headings, so a theme's heading styles do not reach them and the page's outline is not three numbers.

### Display type

Off the theme's ladder on purpose, because the size is the composition:

- paragraph at clamp(2.5rem, 4.6vw, 4rem)

Technical notesBlock mechanics, responsive behaviour and constraints

### How the bottom alignment is built, and why

The cover's own content positions (bottom left, bottom center) were not used. A custom content position sets the cover's inner container to width: auto, so it shrink-wraps to its content; a plate carrying a long paragraph fills its measure anyway, which is why cover-plate can use one, but a ledger of short numbers would shrink to the width of its words, and to a different width in every theme's typeface. So the cover keeps core's default centring, which keeps the inner container at width: 100%, and the first group inside it is a vertical flex stack with min-height: 34rem (the same value as the cover's floor), justifyContent: stretch and verticalAlignment: bottom. The stack fills the cover, its one child (a constrained wrapper at contentSize: 1240px, which picks up the theme's root padding and so sits at the theme's gutter) is pushed to the floor, and the columns inside it span the measure at every width. A buyer raising the cover's height changes minHeight on the cover AND min-height on that first group; they are the same number on purpose.

### The rule this pattern obeys

Type never sits on a photograph. Every word is on a plate whose ground is a base chain and whose type is a contrast chain, and every paragraph states its own text colour rather than inheriting the plate's, so a theme's element styles cannot repaint it. Every word is therefore measured on a pair of colours your theme guarantees. The veil over the photograph is decoration; it may recede without loss. 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 plates today, and the chain is there so that 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 set the focal point high, since the foot is covered by the ledger. Then the three numbers and their labels; a label reads best under 22 characters so it holds one line on every plate, and the line under it under about 60 characters so the three plates stay the same height. The line is optional: delete the third paragraph from every plate, not from one.

### Why the height is in rem

The cover's minHeight is 34rem, 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; that loop only ever shrinks. rem also means the section is the same height in every theme at a given root size. The veil is dimRatio: 40 rather than a value between tens because core ships an opacity rule only for multiples of ten; has-background-dim-35 would match no rule and fall back to 50%.

### Measured

Editor round-trip on WordPress 7.0: base and both variations valid, and the markup the editor writes back is identical to each authored file (after the editor's harmless -- escaping). The editor writes a video cover's backgroundType key after isUserOverlayColor, not after dimRatio; the file ships that order.

### 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. 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 ledger: common questions

Does Cover ledger need a plugin?

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

Will Cover ledger match my theme?

Choose by variation. Paper ledger, In motion and Ink ledger take your theme’s palette; Mend brings its own colours.

How many variations does Cover ledger have?

4: Paper ledger, In motion, Ink ledger and Mend. 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 ledger free?

It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one.

12KB of core-block markup, 5 blocks (column, columns, cover, group, 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

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

Subscription

Plugin

None, core blocks only

Variations

4

Colour

From your theme or its own palette

Type

From your theme or its own type

Motion

None

Blocks

column, columns, cover, group, paragraph

Presets

color 5, font-size 1, spacing 3

WordPress

7.0+

Continue exploring

## Next in Cover

Explore all 16 Cover patterns (https://patternpaste.com/patterns/cover/)Also in Stats (https://patternpaste.com/patterns/stats/)

Shot in Twenty Twenty-Five Cover No plugin needed

### Cover lap

A page opener where a full-bleed photograph gives way to a band of your theme's paper, and an ink plate carrying the eyebrow, headline, lede and button straddles the edge between them: half on the picture, half on the page.

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

Shot in Twenty Twenty-Five Cover No plugin needed

### Cover lit column

A display heading and lede on your page ground over a full-bleed band of four tall photographs set edge to edge.

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

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)