# Cover filmstrip

> A full-bleed band in your theme's contrast colour with a display heading, a short lede and a button, over a single row of five tall photographs that runs into both edges of the page: the middle three are whole frames numbered 02 to 04 on small plates, and the first and last are narrower crops flush to the page edges, so the strip reads as cut by the page. On a phone the middle frame takes half the width and its neighbours run off the edges. Includes replaceable example photographs. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/cover-filmstrip.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: button, buttons, cover, group, heading, paragraph
Keywords: cover, filmstrip, photo, strip, bleed, gallery, café

## Variations (2)

### Ink band, five frames (the default)

Identical markup in every theme.

A band of your contrast with your base as the type; the photographs carry no veil, and each number plate is your base under your contrast.

### Roast and oat

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

A café look: a dark roast ground with cream type and an oat accent on the eyebrow, the number plates and a square See the menu button, with an Iowan Old Style headline over Helvetica.


---

## The signature moment: the strip runs off both edges of the page

The middle three frames are whole `3/4` covers with a numbered plate, 02 to
04. The first and last are narrower covers set flush to the page edges, each
showing the inner side of its photograph (focal point at the far edge), so
they read as frames 01 and 05 cut by the page, their plates off screen.
Nothing actually leaves the viewport: a frame pushed past the page edge is
unreachable on a phone and the page would scroll sideways, so the bleed is
made by the crop instead.

The row is a flex row whose frame widths switch at 782px with a
`clamp()` ramp: on a wide screen the edges take 11% each and the three whole
frames 26%; on a phone the middle frame takes half the width, its neighbours
run to the page edges and a sliver of the first and last frames shows beyond
them. The band is a cover holding the first photograph under a full veil of
your `contrast`, so it paints a plain ground and clips nothing it should not.

## Type and the photographs

The heading is display type, a bare `clamp()` from 44px to 96px, because its
size is the composition. Eyebrow, lede and button sit on the band, your `base`
on your `contrast`. The frames carry no veil and no type: each number sits on
a small plate of your `base` under your `contrast`, in `small`.

## What it inherits, what it decides

Inherits: every colour, the typeface, the spacing scale. Decides: the frame
widths at each size, the `3/4` frames, the 0.625rem gutter, the 1680px
measure of the heading row and the display ramp.

## What a buyer changes first

The five photographs, keeping the strongest one in the middle frame, which is
the largest at every width. In the two edge frames keep the focal point at
the inner edge so the cut still reads.

## Included images

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