Cover interval: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/cover-interval.html Core Patterns (https://patternpaste.com/patterns/) Cover (https://patternpaste.com/patterns/cover/) Catalogue access Standard # 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. The video cover remains empty for your own clip; the still-image variation includes an example photograph. Ships with a paragraph of essay copy above and below, so the band reads as a break in a page. ## All patterns Search patterns Loading patterns… 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. Theme handoff ## What comes from where ### Theme and pattern 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. 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 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. Make it yoursVariations and the edits to make first ### Variations - 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. Theme behaviourInheritance, fixed decisions and contrast ### 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 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. ### Contrast 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. Technical notesBlock mechanics, responsive behaviour and constraints ### The rule this pattern follows 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. ### What a buyer changes first 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