Editorial cover contents, Pattern Paste Canonical: https://patternpaste.com/pattern/editorial-cover-contents.html Library (https://patternpaste.com/patterns/) Editorial (https://patternpaste.com/patterns/editorial/) Catalogue access Standard # 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. 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. Theme handoff ## What comes from where ### Theme and pattern 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. Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview A screen-height, full-bleed core/cover set like a magazine's front: 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. Two regions of unequal weight on one photograph. ### 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. Make it yoursVariations and the edits to make first ### 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/columns along the cover's foot: four across from tablet width, stacked into the ruled list below 782px. Theme behaviourInheritance, fixed decisions and contrast ### 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. Technical notesBlock mechanics, responsive behaviour and constraints ### 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 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. ### 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 (https://patternpaste.com/image-credits/) for the source and license. Pasting an image URL does not import a Media Library attachment. 16KB of core-block markup, 4 blocks (cover, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Start free trial to copy (https://patternpaste.com/account/#plan) What you copy is yours forever. Cancel whenever. Back to the library (https://patternpaste.com/patterns/) Catalogue access ### £70 a year Save £50 Or £10 a month All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Start with three days of full access on sign-up, no card. Start free trial (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)Blog Post featured lead Two Query Loops read as one section: the newest post opens at display size with its featured image, its byline and an excerpt, and the three behind it sit in a rail beside it as ruled date-and-title lines with no picture at all. It reads your own posts, so the lead changes the moment you publish; the preview on this page shows sample posts from our demo site, not yours. States no colour and no font of its own. (https://patternpaste.com/pattern/post-featured-lead.html)Call to action CTA band A full-bleed closing band that inverts the page: a contrast ground carrying base text, one centred statement, one action. States no colour and no font of its own. (https://patternpaste.com/pattern/cta-band.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/). #### What's inside Blocks cover, group, heading, paragraph Core only yes Chains 44, deepest 3 rungs currentColor yes color base, black, contrast, role-label, white font-size large, medium spacing 20, 30, 40, 50, 60, 70 Continue exploring ## Next in Editorial Explore all 11 Editorial patterns (https://patternpaste.com/patterns/editorial/)Also in Cover (https://patternpaste.com/patterns/cover/) Shot in Twenty Twenty-Five Editorial Editorial Standard ### Content columns A long-form editorial section held to a strict reading measure, with a narrow sidenote rail hanging outside it: each note sits under its own hairline beside the paragraph it annotates, and drops beneath that paragraph on a phone. 6 blocks Open preview (https://patternpaste.com/pattern/content-columns.html) Shot in Twenty Twenty-Five Editorial Editorial Gallery Standard ### Editorial lap A two-frame editorial spread where an inverted headline slab laps up over the first photograph and breaks out of its column. 7 blocks · 5 variations Open preview (https://patternpaste.com/pattern/editorial-lap.html) Display shout (https://patternpaste.com/pattern/editorial-lap.html#variant=display-shout)Ink and sand (https://patternpaste.com/pattern/editorial-lap.html#variant=ink-and-sand)Mirror masthead (https://patternpaste.com/pattern/editorial-lap.html#variant=mirror-masthead)Night section (https://patternpaste.com/pattern/editorial-lap.html#variant=night-section)Paper slab (https://patternpaste.com/pattern/editorial-lap.html#variant=paper-slab) Shot in Twenty Twenty-Five Editorial Editorial Standard ### Figure break A reading column interrupted by one wide photograph: the prose holds a strict measure, the figure breaks out to twice that width, and its caption hangs from a small index at the figure's left edge before the column resumes. 4 blocks Open preview (https://patternpaste.com/pattern/figure-break.html)