Cover figures

A heading row on your page ground over three tall core/cover frames set side by side across the full width, each holding one figure.

Every figure gets a photograph of its own, under an 80% veil of your contrast, so the scene reads as texture behind the number rather than as a picture beside it. The figure is the largest thing in its frame, a small label sits above it and a ruled line of explanation below, all at the frame's foot.

Inherits: every colour, the typeface, the spacing scale, the button. Decides: the veil's opacity, the frame heights (a top padding that grows with the viewport, so a phone's frames are shorter), the 4px seams between frames, and the 22rem measure of each explanation. The frames are a grid whose minimum column is a third of its width from 46rem up and the whole width below it, so it shows three across or one column, never two with a hole, and every frame in a row is the same height.

At dimRatio 80 with a contrast veil, base type keeps its contrast over any photograph you choose, white or black. The figures and the heading are display type, a bare clamp(), because their size is the composition; the explanations are body copy on the medium rung, and the rule above each is currentColor, so it follows the type.

The three figures and their lines; keep each figure to five characters at this size. Then the photographs: any scene works under the veil, so choose for mood, not detail.

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.