# Article cover chapter

> A full-bleed article cover with an oversized chapter number beside the title, standfirst and author, date and reading-time facts. A heavy veil keeps every word readable over the replaceable example photograph. States no colour and no font of its own.

Canonical: https://patternpaste.com/pattern/article-cover-chapter.html
Section: Single articles
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: column, columns, cover, group, heading, paragraph
Keywords: article, chapter, cover, editorial, headline, long-form, metadata

Promise: Identical markup in every theme.

---

## The signature moment: an oversized chapter number beside the title

The numeral and the article copy occupy two columns, with the number taking the
narrower column but carrying most of the visual weight. It reaches up to 18rem
at wide widths while the title stays on the theme's `xx-large` rung. That scale
collision marks the article as one chapter in a larger body of work without
borrowing the diagonal contents-list composition from a magazine cover.

On a phone, core stacks the columns. The numeral floors at 7rem and becomes a
short masthead above the title, so its scale survives without squeezing the
words into a narrow strip.

## Type on the photograph

The cover uses a `contrast` overlay at `dimRatio` 80 and `base` type. This is
the measured cover exception to the rule that type does not sit on a
photograph: the veil bounds the possible ground strongly enough for body copy
to clear 4.5:1 over both the lightest and darkest image cases. Lowering the veil
below 80 removes that guarantee.

The numeral is display type with a bare `clamp()` because its size is the
composition. The `h1` uses the `xx-large` chain and states only its size and
colour. The standfirst uses the `medium` chain with a 1.5 line height. Labels
have their own readable floor because the theme's small preset can fall below
body-copy size.

## Layout

The cover is a full-width section with a 44rem minimum height. Its inner
`core/columns` row uses roughly one third of the width for the numeral and two
thirds for the article copy. The metadata is a wrapping flex group, so the
three facts stay in one row when space permits and become a compact sequence on
narrow screens. Horizontal padding grows with the viewport and stops at the
same wide-page inset on large screens.

## What it inherits and decides

It inherits the typeface, the `base` and `contrast` colours and the theme's
spacing scale. It decides the 80% veil, the cover height, the two-column split,
the numeral's display scale and the text measures. No nondefault colour or type
axis is declared.

## What a buyer changes first

Replace the photograph, then change the chapter number and title. Keep the
title to roughly eight words. Rewrite the standfirst as one or two sentences,
then replace the author, publication date and reading time. The photograph is
decorative in this composition, so its empty alt text is intentional.

## Included image

The example is a reviewed WordPress Photo Directory photograph of a broad
volcanic crater beneath a golden horizon. Its public URL keeps the example
visible after pasting. Select the cover and choose **Replace** to use a Media
Library image. See [image credits](/image-credits/) for the source and licence.
Pasting the pattern does not import the example into the Media Library.