# Posts cover front page

> A newspaper front page set on one photograph: a heavy veil of your theme's contrast colour over the picture, a masthead ruled across the top, the lead story low in the left two thirds with a kicker, a display headline that links to the post, a standfirst and a byline, and a ruled right column headed "Also in this issue" listing three more stories between hairlines. The column drops under the lead on a phone. Hand-written entries in core blocks, not a query loop. 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.

Canonical: https://patternpaste.com/pattern/posts-cover-front-page.html
Section: Blog
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: posts, news, front page, newspaper, cover, lead story, photo

## Variations (2)

### Lead and column (the default)

Identical markup in every theme.

An 80% veil of your contrast under your base type: the lead story fills the left two thirds at the foot, three further stories ruled in a column on the right.

### Stories on the floor

Identical markup in every theme.

The lead headline runs wide across the cover and the three further stories become a ruled row of three along its floor, stacked into a ruled list on a phone.


---

## The signature moment: the front page is one photograph

A posts section usually gives every story its own thumbnail and lets the grid
do the work. Here there is one picture and it is the whole page: the lead
story, the masthead and the three stories under "Also in this issue" are all
set on the same veiled photograph. The lead is display type, low and wide; the
column is small, dense and fenced by hairlines. The collision of one headline
against three quiet entries, on one ground, 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 standfirst and
entries are body size, so they need the full 4.5:1, which the checker measures
by compositing the veil over a white and a black photograph. Lower the veil
below 80 and that stops being true.

## Type and hierarchy

- The lead headline is display: a bare `clamp(2.75rem, 7.4vw, 10.5rem)`, off
  the theme's ladder, because its size is the composition. It is held to a
  measure of `clamp(18rem, 56vw, 68rem)` so it breaks into a block.
- The column's three titles are `h3` on the `x-large` rung, so the column is a
  second mass beside the headline; in the floor row they drop to `large`. The
  standfirst is body
  copy on `medium`; the masthead, kickers, byline and dates are labels with
  their own `clamp()` floored at 15px.
- Only the lead headline is a link. Its wrapper states the link colour as the
  `base` chain, so a theme's accent link colour never lands on the veil, and
  `textDecoration: none`: it reads as a link by position, and an underline at
  display size is heavy. The three story titles are plain text, as in the
  catalogue's other post patterns; a one-line title link is under the 44px tap
  target.
- Hierarchy comes from size and the rules alone: nothing is set in capitals.

## Layout

- The inner stack is a vertical flex group with `space-between` and a minimum
  height of `clamp(36rem, 52vw, 60rem)` (never `vh`): masthead at the top, the
  story row at the foot.
- The story row is `core/columns`, 62% and 38%, each column aligned to
  the bottom. Below 782px it stacks and the column drops under the lead.
- The cover keeps its default layout; inner groups state zero side padding.
- Rules are `currentColor`, so they are always the colour of the type.

## What it inherits, what it decides

Inherits: every colour (veil `contrast`, type, links and rules `base`), the
typeface, the spacing scale. Decides: the veil's opacity, the type ramp, the
headline measure, the cover's minimum height. The headline is `h1`: this is a
page opener.

## What a buyer changes first

The photograph: choose Replace on the cover. Then the lead story and its link,
and the three entries. Add or remove an entry by duplicating or deleting its
group; the last one carries the closing rule.

## Variations

- **Stories on the floor**: the lead headline runs wide across the cover and
  the three further stories become a ruled row of three `core/column`s along
  its floor, each entry ruled above and below, stacked into a 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.

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