# Editorial cover contents > A screen-height cover like a magazine's: a heavy veil of your theme's contrast colour over the photograph, a display headline hung in the lower left and a numbered contents list in a narrow column at the top right, each entry a number, a title and one line between hairline rules. The list drops beneath the headline on a phone. Includes a replaceable example photograph. States no colour and no font of its own. Ships with a short hand-off row on your theme's paper below it, so the cover reads as a section and not the page. Canonical: https://patternpaste.com/pattern/editorial-cover-contents.html Section: Editorial Access: Included in Pattern Paste access. Needs: Requires a block theme on WordPress 6.7 to 7.0. 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: cover, group, heading, paragraph Keywords: magazine, cover, contents, issue, editorial, photo ## Variations (3) ### Ink veil (the default) Identical markup in every theme. An 80% veil of your contrast over the photograph with your base as the type: the headline low on the left, four numbered entries ruled from the top on the right. ### Contents at the foot Identical markup in every theme. The headline runs wide across the top and the contents become a ruled row along the foot of the cover, four across from tablet width, stacked into a ruled list on a phone. ### Paper veil Identical markup in every theme. The same cover inverted: the veil is your base at 80% and every word and rule your contrast, the photograph a pale ghost behind ink. For a page that stays light. --- ## The signature moment: the contents are on the cover A web cover usually says one thing and sends the reader down the page for the rest. This one carries its own table of contents: four entries, each a number, a title and one line, stacked between hairline rules in a column about 22rem wide, pinned to the top right while the headline sits at the opposite corner. The weight is all on the left and low; the detail is all on the right and high. The diagonal between them is the composition, and it holds in greyscale. ## Type on the photograph Type sits on the image only because the veil makes the ground a known quantity: `contrast` at `dimRatio` 80 under `base` type, the pairing `cover-veil` measured at 9.7:1 in Twenty Twenty-Four over the lightest photograph you could choose. The contents copy is body size, so it needs the full 4.5:1, not the 3:1 allowed to large display type; the checker composites the veil over a white and a black photograph and the worse ground has to pass. Lower the veil below 80 and that stops being true. ## Type and hierarchy - The headline is display: a bare `clamp(3rem, 8vw, 10rem)`, off the theme's ladder, because its size is the composition; at 1920 it is about 154px and fills the lower left of the cover. It is held to a measure of `clamp(18rem, 44vw, 48rem)` so it breaks into a block at every width and always leaves the contents column room beside it. - Entry titles are `h3` on the `large` rung; the one-line descriptions are body copy on `medium`; the numbers, the issue line and "In this issue" are labels with their own `clamp()` floored at 15px. - Hierarchy comes from size and the rules alone: nothing is set in capitals. - Every heading states its size and colour chain and nothing else. ## Layout - The inner row is a wrapping flex row, stretched, with a minimum height of `clamp(34rem, 50vw, 58rem)` (never `vh`, which the preview frame shrinks), so the cover is about a screen tall on a desktop. - The left region is a vertical flex column with `space-between`: the issue line at the top, the headline at the foot. - The contents column is a constrained group, right-justified. Its measure is `max(clamp(15rem, 24vw, 26rem), calc((600px - 100vw) * 100))`: below a 600px screen the second term takes over, the column can no longer sit beside the headline and it drops beneath it at full width. At 820 the two regions still share the row. The horizontal gap uses spacing preset 40 so Twenty Twenty-Four's larger spacing scale still leaves room for both columns at 1920px. - Rules are `currentColor`, so they are always the colour of the type. ## What it inherits, what it decides Inherits: every colour (veil `contrast`, type and rules `base`), the typeface, the spacing scale. Decides: the veil's opacity, the type ramp, the two measures, the cover's minimum height. The cover states its own text colour chain so core's `:where()` rule that paints cover text `#fff` never applies. The headline is `h1`: this is a page opener. ## What a buyer changes first The photograph: choose Replace on the cover. Then the headline, kept to about five words, and the four entries. Add or remove an entry by duplicating or deleting its group; the last one carries the closing rule. ## Variations - **Paper veil**: the veil is `base` at 80% and every word and rule `contrast`, the photograph a pale ghost behind ink. - **Contents at the foot**: the headline runs wide across the top and the contents become a ruled row of four `core/column`s along the cover's foot: four across from tablet width, stacked into the ruled list below 782px. ## The hand-off row A short row on your theme's paper under the cover, a label and one paragraph at a 34rem measure, so the cover reads as a section and shows where it ends. It is the first thing a buyer rewrites or deletes. ## Included images The copied markup includes a WordPress Photo Directory example photograph. The public image URL keeps the example visible after pasting. Select the cover and choose **Replace** to use your own Media Library file. See [image credits](/image-credits/) for the source and license. Pasting an image URL does not import a Media Library attachment.