Cover interval

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

• Still: the cover's settings without backgroundType: "video", so it is a photograph. Everything else is 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.

• Charcoal and saffron: warm paper around a cover with a charcoal veil. The plate uses your contrast and base with charcoal and paper fallbacks; saffron is reserved for its bold Helvetica Neue label.

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 cover's 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.

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.

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 is measured as type on a guaranteed pair. The veil over the clip is decoration; it may recede without loss, and at 20% it mostly does.

The clip. The cover ships EMPTY, which is valid in the editor: 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.

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.

The cover's minHeight is 22rem, 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 cover-plate, that loop only ever shrinks. rem also means the interval is the same height in every theme at a given root size.

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.

The still-image variation includes WordPress Photo Directory example photographs. The video version remains empty for your own clip. 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.