# Cover contents

> A full-bleed photograph under a heavy veil of your contrast colour, set like a magazine contents page: a large eyebrow, a display title and a short lede, then a ruled list of four rows, each a small clear photograph, a number, a large title and a text link. The thumbnails sit on the veil with no type on them. On a phone each row stacks, the thumbnail beside its number and the title and link beneath. Includes five replaceable example photographs. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/cover-contents.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, contents, index, list, photo, magazine, thumbnails

## Variations (2)

### Contents on the veil (the default)

Identical markup in every theme.

An 80% veil of your contrast over the photograph with your base as the type and the rules; the four thumbnails show their photographs clear.

### Dusk and apricot

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

A travel look: a deep dusk-blue veil and ground with cream type, apricot numbers and rules, an Iowan Old Style title and row titles over Helvetica, and cream underlined links.


---

## The signature moment: a contents page set over its own photograph

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.

## Why type on the photograph is permitted here

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.

## What it inherits, what it decides

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.

## What a buyer changes first

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.

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