Cover contents

A full-bleed core/cover set like a magazine's contents page: the heading, then a ruled list of four rows, each led by a small photograph of its own.

The background photograph sits under an 80% veil of your contrast, and the list is laid on the veil: four rows divided by currentColor rules, each a clear 3:2 thumbnail, a number, a large title and a text link. The thumbnails are covers at no veil, so they sit on the darkened scene as bright prints with no type on them, and the page reads as an index of photographs.

Inherits: every colour, the typeface, the spacing scale. Decides: the veil's opacity, the 1440px measure, the 3:2 thumbnails that grow with the viewport (7rem to 20rem), and the row: a wrapping flex row, so on a phone the thumbnail and number keep their line and the title and link drop beneath.

At dimRatio 80 with a contrast veil, base type keeps its contrast over any photograph you choose, white or black. No type touches a thumbnail. The title is display type, a bare clamp(), because its size is the composition; the eyebrow takes the large rung, the row titles x-large, and the numbers are display type sized to sit beside the thumbnails.

The four thumbnails and their titles, then each link's address; keep titles to one line at desktop. The background photograph is decorative, so its alt text is empty; choose one that reads as texture under the veil.

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.