Cover filmstrip

A full-bleed band in your contrast 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, so the first and last frames read as cut off by the page.

The middle three frames are whole 3/4 covers with a numbered plate, 02 to

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

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.

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.

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.

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