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

Canonical: https://patternpaste.com/pattern/post-featured-lead.html
Section: Blog
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: column, columns, group, paragraph, post-author-name, post-date, post-excerpt, post-featured-image, post-template, post-title, query, query-no-results
Keywords: posts, query, query loop, featured, lead, blog, latest, news

## Variations (2)

### Lead and rail (the default)

Identical markup in every theme.

Your newest post at 62% of the measure with its picture, and posts two, three and four beside it as ruled lines. One rule runs across both halves at the top and closes the section at the bottom, and every hairline is currentColor. The posts, pictures, bylines and dates are read from your site; the ones in this preview are our sample content.

### Teal and ivory

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

Ivory paper and deep teal copy set Avenir Next post titles against brighter teal editorial labels.


---

## This one queries your posts

**This pattern is two `core/query` loops reading the same posts.** The lead asks
for one post; the rail asks for three with an offset of one, so it starts where
the lead stopped and no post appears twice. Publish, and the lead becomes the
new piece and the old lead drops to the top of the rail.

**The preview on the product page is our sample content, not yours.** A dynamic
block renders the site it is in, so the four posts in the stage are the demo
posts on our verification install. What you paste is the pair of queries.

## The signature moment: one post at display scale against three at caption scale

`post-grid` weights six openings identically and `post-list` weights five rows
identically. This one does not, and the hierarchy IS the composition: a 16:9
picture and a 48px headline on 62% of the measure, against three entries on the
other 38% that are a tracked date and a 20px title and nothing else. There is no
middle term. One rule runs across both halves at the top and another closes them
at the bottom, so the two densities are held inside one plate and read as a
ranking rather than as two sections that happen to be adjacent.

Every rule in it is `currentColor`: the plate's top and bottom edges and the
hairline above each rail entry. Nothing states a colour, so the whole device
survives an inversion or a recolour without a single value being restated.

## What it inherits from your theme

- **The typeface.** The pattern states no font family anywhere. The lead's
  headline is a `clamp()` and the ramp between it and the rail is the design.
- **Your colours.** The ground asks for `base` and the type asks for `contrast`,
  the two slugs every stock block theme defines, each ending on a colour
  WordPress guarantees.
- **Your spacing scale.** The plate's padding, the gap between the halves and
  the air inside a rail entry are spacing presets.
- **Your featured image, and whatever your theme does to it.**

## What it decides for itself

- **One and three.** `perPage` 1 with no offset, then `perPage` 3 offset by 1.
  Change one and you must change the other, or a post shows up twice.
- **Full bleed with its own measure**, held to 1240px.
- **62/38.** The lead needs a picture at a readable size and the rail needs a
  title to break at most twice. Below 782px core stacks them, and the lead is
  first, which is why the lead is the left column and not the right.
- **A meta line, not a trailing date.** The lead's date and author sit on one
  flex row above the headline, in the same order as the rail's date-then-title,
  so the two halves scan the same way. An earlier draft put the lead's date last
  and it read as a fourth line of the excerpt.
- **The 16:9 crop on the lead, and no picture at all in the rail.** The rail is
  the counterweight; give it thumbnails and the ranking disappears.
- **Titles carry their own explicit text colour**, because a theme's heading
  element style beats a colour set on a wrapping group.
- **An empty state on each loop**, so a site with one post or none still renders
  a section rather than a blank plate.

## Links, and why the title is not one

**The picture is the link; the title is not.** A tap target has to be at least
44px in its smaller dimension at 390, which is the width a thumb actually works
at, and an inline text link is only ever as tall as its
line box: a one-line title at 24px is a 26px target and a tracked category line
is a 19px one. No block attribute can make an inline link taller without leaving
absurd space around the type, so this pattern ships the featured image as the
tap target, where the box is the picture and there is nothing marginal about it.

The Post Title block carries a **Make title a link** toggle in its own panel, so
turning the titles into links is one click and it is your decision rather than
ours. Categories are not offered at all: `core/post-terms` always renders each
term as a link, with no way to turn it off, so the meta slot carries the post's
author instead, which is real post data and is not a target.

The section still sets its own link colour, once, at the top, to the same
`contrast` chain as its body text. That is defensive: a theme's link colour can
be an accent, an accent's luminance is unknowable, and if you do switch the
titles on they will be the colour of the type around them.

## What to change first

1. **Which post leads.** The loops are date-ordered. To pin a piece, set the
   lead loop to a category of one, and give the rail loop the same offset
   arithmetic.
2. **The rail's length.** Three is what fits beside a 16:9 lead. Four fits if
   you drop the lead's excerpt.
3. **The section label.** "From the journal" is a tracked paragraph above the
   plate; delete it and the plate's top rule still opens the section.
4. **The excerpt.** 32 words on the lead, none in the rail. That gap is the
   hierarchy.
5. **The date format.** Set on each Post Date block. Both ship as `j M Y`.

## Notes

- Core blocks only: group, paragraph, columns, column, query, post-template,
  post-featured-image, post-author-name, post-title, post-excerpt, post-date,
  query-no-results. No plugin, no script.
- `core/query-total` is deliberately absent. It is a recent core block, and an
  older WordPress shows it as a broken block.
- Every colour is a fallback chain ending on a colour WordPress guarantees, and
  no rule in the pattern states a colour at all.
- Text never sits on a photograph. The picture carries atmosphere and the
  headline sits on your page ground beneath it.
