Lead over the recent row, Pattern Paste Canonical: https://patternpaste.com/pattern/post-lead-stack.html Library (https://patternpaste.com/patterns/) Blog (https://patternpaste.com/patterns/posts/) Catalogue access Standard # Lead over the recent row Two Query Loops read as one section, turned through ninety degrees: the newest post runs the full measure with a wide 21:9 picture, a byline and an excerpt, and the three behind it sit under it as a row of three ruled date-and-title columns with no picture at all. One plate holds both, opened and closed by currentColor hairlines, so the ranking reads top to bottom instead of side to side. 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. Start here ## What to change first - Which post leads. The loops are date-ordered. - The row's length. Three is what the grid fits at 1240px with an 18rem minimum. - 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. - The crop. 21:9 is set on the Post Featured Image block. - The excerpt. 32 words on the lead, none in the row. - The date format. Set on each Post Date block. The signature moment ## One picture the width of the page, three lines of type under it post-grid weights six openings identically and post-list weights five rows identically. This one does not, and the hierarchy IS the composition. The lead is a 21:9 band of photograph running the whole 1240px with a 60px headline under it; the three behind it are a tracked date and a 22px title apiece and nothing else. There is no middle term and there is no second picture. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. - Your featured image, and whatever your theme does to it. ### Set by this pattern - One and three. - Full bleed with its own measure - The excerpt keeps a reading measure. - A meta line, not a trailing date. - No picture at all in the three. - Titles carry their own explicit text colour - An empty state on each loop 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 The newest post opens the section across the full measure with a wide 21:9 picture, a byline and an excerpt; the three behind it sit under it as a row of three ruled date-and-title columns with no picture at all. One plate holds both, opened and closed by hairlines. It is the posts section for a page that has nothing else on it. ### The signature moment: one picture the width of the page, three lines of type under it post-grid weights six openings identically and post-list weights five rows identically. This one does not, and the hierarchy IS the composition. The lead is a 21:9 band of photograph running the whole 1240px with a 60px headline under it; the three behind it are a tracked date and a 22px title apiece and nothing else. There is no middle term and there is no second picture. The 21:9 crop is the reason this composition exists rather than the other. At full measure a 16:9 picture is 700px tall and pushes the headline off the first screen; 21:9 is 530px, wide enough to read as a banner and short enough that the date, the byline and the headline arrive with it. A lead beside a rail can afford a squarer crop because it is only 62% of the measure. A lead that has the whole width cannot, and that is the trade this pattern makes deliberately. Every rule in it is currentColor: the plate's top and bottom edges and the hairline above each of the three columns. Nothing states a colour, so the whole device survives an inversion or a recolour without a single value being restated. Make it yoursVariations and the edits to make first ### What to change first - Which post leads. The loops are date-ordered. To pin a piece, set the lead loop to a category of one, and give the row loop the same offset arithmetic. - The row's length. Three is what the grid fits at 1240px with an 18rem minimum. Four fits if you drop the minimum to 14rem, at the cost of a title that breaks three times. - 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. - The crop. 21:9 is set on the Post Featured Image block. 16:9 is the obvious alternative and it will cost you about 170px of height at full measure. - The excerpt. 32 words on the lead, none in the row. That gap is the hierarchy. - The date format. Set on each Post Date block. Both ship as j M Y. Theme behaviourInheritance, fixed decisions and contrast ### 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 row 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. The section sets its own link colour once, at the top, to the same contrast chain as its body text. - Your spacing scale. The plate's padding, the gap between the lead and the row, the grid's gutters and the air inside an 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. - The excerpt keeps a reading measure. The picture and the headline run the full width, but the excerpt sits in a nested constrained group at 34rem and is left aligned, so the copy is never a 1240px line of text. - 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 row's date-then-title, so both parts of the section scan the same way. - No picture at all in the three. The row 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. The lead is an h2 and the three are h3, so the section is one level of outline rather than four siblings. - An empty state on each loop, so a site with one post or none still renders a section rather than a blank plate. Technical notesBlock mechanics, responsive behaviour and constraints ### This one queries your posts This pattern is two core/query loops reading the same posts. The lead asks for one post; the row 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 left of the row. 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 row of three is a grid, not columns core/columns stacks to one column below 782px and does nothing at all between 1240 and 783, which for three short entries is a row that is either three or one with no step between. The row here is a core/post-template with layout: {"type":"grid","minimumColumnWidth":"18rem"}, so the browser fits as many 18rem columns as the measure allows: three at 1240, two around 820, one on a phone. The hairline above each entry is a border on the entry's own group, so it travels with the entry into whatever row it lands in and the strip is ruled correctly at every one of those widths. ### 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, and an inline text link is only ever as tall as its line box: a one-line title at 22px is a 24px target. 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; the link colour is already set to the colour of the type around them. 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. ### Notes - Core blocks only: group, paragraph, 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 does not exist in WordPress 6.6, which is this catalogue's floor. - 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. 7.2KB of core-block markup, 10 blocks (group, paragraph, post-author-name, post-date, post-excerpt, post-featured-image, post-template, post-title, query, query-no-results), 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 Editorial Article footer The close of an article: a portrait of the author beside their name, the biography under both inside a currentColor slip held to the middle half of the measure, and the previous and the next post hanging off the two outer edges so the section reads as a doorway rather than a footer. The name, the biography and the two neighbours are dynamic core blocks, so they are the post's own and the preview here is sample data; the portrait is an ordinary image block you swap for your author's own. The previous and next links only resolve on a single post template, which is where this pattern belongs. (https://patternpaste.com/pattern/article-footer.html)Header Nav bar A header bar on one line: a heavy, tightly tracked wordmark at the left edge against tiny widely tracked links at the right, one solid action beside them, and a hairline under the whole bar. The links are your WordPress menu, a core navigation block that folds to a menu button on a phone so the bar stays one line. Compact by construction, so it reads as the top of a page and never as a hero. States no colour and no font of its own. (https://patternpaste.com/pattern/nav-bar.html)Footer Footer cover colophon A footer that ends the page on a photograph: a full-bleed cover under a heavy veil of your theme's contrast colour, a display-size sign-off high on it with an outlined contact button and one line of copy, four short link columns lower down, and along the very floor a hairline and the small print. The columns wrap two across on a phone. Includes a replaceable example photograph. States no colour and no font of its own. (https://patternpaste.com/pattern/footer-cover-colophon.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/) Featured images come from your own posts. The preview uses sample content. #### What's inside Blocks group, paragraph, post-author-name, post-date, post-excerpt, post-featured-image, post-template, post-title, query, query-no-results Core only yes Chains 17, deepest 3 rungs currentColor yes color base, black, contrast, role-label, white spacing 20, 30, 40, 50, 60, 80 font-size medium Continue exploring ## Next in Blog Explore all 7 Blog patterns (https://patternpaste.com/patterns/posts/) Shot in Twenty Twenty-Five Blog Blog Standard ### Post grid A run of writing as three openings across: each is a 3:2 image frame inset in its own mat, a hairline drawn beneath it that runs wider than the picture, and under the rule a tracked kicker, a title set tight and a date. 4 blocks · 1 variation Open preview (https://patternpaste.com/pattern/post-grid.html) Night openings (https://patternpaste.com/pattern/post-grid.html#variant=night-openings) Shot in Twenty Twenty-Five Blog Blog Standard ### Post list An illustrated article index: a cropped WordPress photograph and tracked date sit in a narrow left column, beside a large title and short standfirst. 7 blocks · 1 variation Open preview (https://patternpaste.com/pattern/post-list.html) Night index (https://patternpaste.com/pattern/post-list.html#variant=night-index) Shot in Twenty Twenty-Five Blog Blog Standard ### Post query grid A live Query Loop as three openings across: each post is its featured image inset in a mat, a hairline drawn beneath it that runs wider than the picture, and under the rule the post's author, its title and its date. 9 blocks · 1 variation Open preview (https://patternpaste.com/pattern/post-query-grid.html) Night feed (https://patternpaste.com/pattern/post-query-grid.html#variant=night-feed)