Cover ledger

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

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

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.

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

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

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.

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.

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.

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

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.

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.

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 for the sources and licenses. Pasting an image URL does not import a Media Library attachment.