[Library] Writing

Catalogue accessStandard

Post grid

A run of writing as three openings across: each is an empty 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. Hand-written entries in core blocks, not a query loop, so it works on a static page and every word is yours to edit. The openings sit in a grid with an 18rem minimum column, so the run is three across on a desktop, two on a tablet and one on a phone. States no colour and no font of its own.

Variation View
Before you copy
Open in a new window

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

A run of writing as three openings across the page: a picture, then the piece it belongs to. It is the grid version of an article list, built to sit in the middle of a page between a features section and a closing ask, and to carry a "latest writing" block on a site that has one.

These are hand-written entries, not a query loop. There is no core/query, no core/post-template and nothing that reads the database. Every kicker, title and date is a core paragraph or heading you type, so the pattern works on a static page, in a page builder's canvas, and on a site whose posts live somewhere else entirely. If you want the three newest posts to appear by themselves, this is the wrong pattern and a Query Loop is the right one.

The signature moment

The mat rule tying image to type

Each opening is a mat: the picture is inset from the column's edges, and a 1px hairline is drawn beneath it that runs wider than the picture, out to the full width of the column. The kicker, the title and the date sit under that rule, inset by the same margin as the image above it.

That one rule does the whole job. It ties the image to the type as a single object, so three openings read as three pieces rather than as a row of pictures with captions underneath. And because it runs past the image on both sides, it is a structural mark rather than a caption divider: at a glance you see three hard horizontal strokes across the section, and the pictures floating above them.

The rule is currentColor. It cannot resolve to nothing, and it follows your text colour wherever your theme puts it, which is why the whole device survives the inversion in the variation without a single colour being restated.

What it inherits from your theme

  • The typeface. The pattern states no font family anywhere. Kickers, titles and dates are all set in your face; the design is in the tracking and the scale, not in the family.
  • 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 itself guarantees. Nothing in the section can blank.
  • Your spacing scale. The band's padding, the gaps between openings and the mat's inset are all spacing presets, so a theme with a generous scale gets a roomier grid without you editing anything.
  • Your images. The three image blocks ship empty, which is exactly what the editor writes before a file is chosen. You get the select-an-image placeholder with the crop already set.

What it decides for itself

  • Full bleed with its own measure. The section spans the viewport and holds its content to 1240px, so it is a band on a page rather than another column of body text, and it does not depend on the section above or below it for air.
  • A grid that reflows, not three columns that do not. The openings sit in a core/group with a grid layout and an 18rem minimum column, so the row is three across on a desktop, two on a tablet and one on a phone, and it changes at the width the cards run out of room rather than at the single 782px line core draws for a Columns block. It was three columns until 2026-08-22, and at 820 that put each title in a 208px column: "The shed that taught us to measure twice" set 13 characters per line over five lines in Twenty Twenty-Four, which is a ribbon and not a headline. Nothing was hidden and no type was shrunk; the row simply stops insisting on three.
  • The 3:2 crop, and scale: cover. Whatever you upload is cropped to the same proportion in all three openings, so the row stays level even when your three photographs do not match.
  • The mat inset, and the one thing about it that is not your theme's. The image is padded away from the column edges and the rule is not. That asymmetry is the pattern; remove it and you have a caption. The side inset is a clamp() from 12px to 24px rather than a spacing preset, and that is deliberate: a preset is whatever the buyer's theme says it is, and in Twenty Twenty-Four spacing|40 is wide enough to take 108px out of a 341px column and leave the title breaking at 19 characters even on a desktop. The top and bottom of the mat are still presets, so the section still breathes on your scale; only the two edges that decide how wide a title can be are bounded.
  • The title ramp. Titles are a clamp() set tight (line-height 1.15, slightly negative tracking) so a three-line title still reads as one object. Titles carry their own explicit text colour rather than inheriting it, because a theme's heading element style beats a colour set on the wrapping group.
  • The kicker and date scale. Both are small, uppercase and widely tracked, and deliberately far from the title in size: the scale gap is what makes the title read as the thing to click.

What to change first

  1. The three titles. They are built for six to ten words breaking over two or three lines. A one-line title leaves the mat looking short next to its neighbours.
  2. The images. Select each frame and point it at your media library. Keep the 3:2 crop unless you change all three.
  3. The kickers. They are a category, a series name or a section of the site. Delete the paragraph if you do not have one; the rule still ties the picture to the title.
  4. The dates. Type them in the format your site uses. They are static text, so nothing reformats them for you.
  5. The header. The tracked label and the one-line lede sit on a 34rem measure at the left. Delete either and the grid still reads.
  6. The count. Three openings is the composition, and the grid means you are not adding a column when you add one: paste a fourth card into the same group and the row becomes four across where there is room for four and two where there is not. What you should not do is lower the 18rem minimum to force more across, because that is the number keeping a title out of a ribbon.
Variations54 words
  • Night openings. The colour axis and nothing else: the band inverts to your contrast ground with your base on it. The mat rules are currentColor, so they flip with the type and no rule is restated anywhere in the file. Both slugs exist in every stock block theme, so the inversion arrives everywhere.
Notes100 words
  • Core blocks only: group, paragraph, heading, image. The row of openings is a group with a grid layout, so there is no Columns block in the pattern at all. No plugin, no script, nothing to keep updated.
  • Every colour is a fallback chain ending on a colour WordPress guarantees, and no rule, border or divider states a colour at all: they are all currentColor.
  • Text never sits on a photograph here. The pictures carry atmosphere and the type sits on your page ground beneath them, so no image you choose can make a title hard to read.
Back to the library

Continue exploring

Next in Writing

Explore all 5 Writing patterns