[Library] Cover

Catalogue accessStandard

Cover interval

A short full-bleed band of looping video set between two text sections, almost empty on purpose: a 20% veil of your contrast colour over the clip and one small ink plate on the bottom-right edge carrying a tracked label and one line. Ships the cover empty; you choose the clip. States no colour and no font of its own. Ships with a paragraph of essay copy above and below, so the band reads as a break in a page.

Variation View
Before you copy

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

A short full-bleed core/cover carrying a looping clip, used as an interval between two text sections. It is the moving cousin of figure-break: where that pattern interrupts a reading column with one photograph, this one interrupts a page with eight seconds of footage, and then says almost nothing about it. A 20% veil of your theme's contrast colour sits on the clip, and one small ink plate sits on the bottom edge at the right gutter with a tracked label and a single line. Nothing else is in the band.

The signature moment

Near-emptiness

The band is 22rem tall and holds one thing, and that thing is small. A cover usually asks to be read; this one asks to be passed through, the way a blank spread or a plate section works in a printed book. The plate is held to 20rem by a constrained wrapper with justifyContent: right, the cover has no top, bottom or left padding of its own, so the plate is flush with the bottom edge, and its right padding is max(0px, 50vw - 640px): nothing at all up to 1280, and above that the inset that holds the plate to the right edge of a 1280px column, so it stays the same distance from the essay measure instead of running out to the corner of a wide window. The scale collision is the point: a full viewport of moving image against a plate the size of a museum label, with nothing in between.

What it inherits, what it decides

Inherits: every colour (the plate is contrast, its type base, the veil contrast at 20%), the typeface, the spacing scale (the plate's padding is spacing|30 by spacing|40, so it is tighter in a theme with a tight scale). Decides: the proportion of the type (a 13px to 14px uppercase label at 0.2em tracking and 600 weight, a 15px line at 1.5 under it), the plate's 20rem width, the cover's 22rem minimum height, its right inset above 1280, contentPosition: bottom right, and the 6.6 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. Each paragraph on the plate states its colour as well, so a theme's element style cannot pull it off the plate's pair.

The rule this pattern follows72 words

Type never sits on a photograph, and a clip is a photograph that changes. Its luminance is unknowable frame to frame, so every word here is on a plate whose ground is a contrast chain and whose type is a base chain, and the contrast gate measures it as type on a guaranteed pair. The veil over the clip is decoration; it may recede without loss, and at 20% it mostly does.

What a buyer changes first94 words

The clip. The cover ships EMPTY, which is valid at WordPress 6.6 and 7.0: click the cover, choose a short, silent video from the media library. Core writes the <video> with autoplay muted loop playsinline, which is what iOS requires to play inline without a gesture; a clip that is already silent and already loops cleanly reads best. The label is the second thing: it is set in caps with wide tracking and reads best under 28 characters. The line under it is optional; delete the paragraph and the plate shrinks to the label.

What happens at 39055 words

The clip is a 22rem band the width of the phone. The plate keeps its 20rem and sits at the right edge on the bottom edge, a little less than the width between the gutters, so the band still reads as footage with a label on it rather than a label with footage behind it.

Variations48 words
  • Still: the cover delimiter without backgroundType: "video", so it is a photograph. Everything else is byte-identical: veil, plate, type.
  • Paper plate: the plate inverts, base ground and contrast type. Still a clip. For footage that is mostly dark, where an ink plate would sink into it.
Why the height is in rem56 words

The cover's minHeight is 22rem, never a vh value. The storefront's stage sizes its frame to the pattern, and a viewport-relative height would size the pattern to the frame in turn; measured on cover-plate, that loop only ever shrinks. rem also means the interval is the same height in every theme at a given root size.

Contrast25 words

Every text pair is base on contrast (or the inverse in Paper plate), a guaranteed pair held to 4.5:1. Nothing is set on the clip.

The essay around it106 words

An interval is nothing without the two halves it sits between, and on its own the clip filled the stage edge to edge and read as the site's frame. So the pattern ships a short paragraph of essay copy above and below the band, each at a clamp(34rem, 40vw, 38rem) measure on your theme's paper: 34rem up to 1280, and a little wider than that on a large screen, where a fixed measure would have shrunk to a quarter of the band. Replace them with your own text; they are there so the band reads as a break in a page and not as a page.

Back to the library