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

Canonical: https://patternpaste.com/pattern/cover-interval.html
Section: Cover
Access: Included in Pattern Paste access.
Needs: 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.
Blocks: cover, group, paragraph
Keywords: cover, video, interval, break, loop, banner, plate

## Variations (4)

### Ink plate (the default)

Identical markup in every theme.

Choose a short, silent, looping clip in the cover's media picker; core writes the video with autoplay muted loop playsinline, so it plays inline on a phone without a tap. The plate is your contrast, its type your base, and it sits on the bottom edge at the right gutter. Nothing else is in the band.

### Charcoal and saffron

This variation states its own colours and states its own type: identical in every theme.

States charcoal on warm paper around the interval and a saffron Helvetica Neue label on a contrast plate whose fallbacks match the palette.

### Paper plate

Identical markup in every theme.

The plate inverts: your base as the ground, your contrast as the type. Still a clip; for footage that is mostly dark, where an ink plate would sink into it.

### Still

Identical markup in every theme.

The same band on a photograph instead of a clip. Choose an image in the cover's media picker; the veil, the plate and the type are byte for byte the same.


---

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

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

## 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 `<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 390

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.

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

## Why the height is in rem

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.

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

## The essay around it

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.

## Included images

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