Margin notes

Three 3:2 photograph frames stacked down a wide right-hand column, each with its caption hanging in a narrow left margin: a 13px tracked caps label and one short line under it. The section's headline sits at the top of that same margin column, beside the first frame, so everything a visitor reads is in the margin and everything they look at is in the frame column. Running down the join between the two, from the top of the headline to the bottom of the last frame, is a single 1px currentColor hairline.

The captions do not sit under their frames. They hang in a ruled margin beside them, and that one unbroken line is the only structural mark in the section, which is what turns three stacked photographs into a set rather than three images in a column.

It is made as a per-side LEFT border on the group inside each frame's column (border.left, currentColor, 1px, solid), never a core/separator, which has no vertical form at all and which Twenty Twenty-Four narrows to a centred stub unless it carries is-style-wide.

How it stays unbroken across three rows. Each frame is its own core/columns, so its caption aligns with it exactly rather than being guessed at with a spacer. The rows would normally be separated by a block gap, which would cut the rule into three. So the vertical rhythm lives INSIDE the frame column instead: the outer group's blockGap is 0, every core/columns states margin-top: 0 and margin-bottom: 0 so no theme's own columns margin can reopen the gap, and the frame group of rows one and two carries padding-bottom: var(--wp--preset--spacing--60). The bordered box therefore runs the full height of its row, including the space before the next frame, and each row's border begins exactly where the previous one ended. The three segments abut with nothing between them and read as one line. The last row has no bottom padding, so the rule stops level with the bottom of the last frame rather than trailing into the band's padding.

Why it survives colourlessness. currentColor cannot blank. It needs no chain, no preset and no slug that a theme might not define, and it follows the theme's text colour wherever the theme puts it, which is exactly right for a mark whose job is to belong to the type rather than to the palette. The band sets its text to a contrast chain, so the rule is that colour, at 1px, in every theme measured.

What happens at 390px, candidly. Core stacks core/columns below 782px, so the two columns become one: caption above, frame below. The rule no longer separates two columns, because there are no longer two columns to separate. What it does instead is a consequence of which side it was authored on: the border is on the FRAME column's group, so it becomes a left rule running down the outside of each stacked frame, through that frame's bottom padding and up to the next caption. It does not read as a stray line, for two reasons. It starts at the exact top edge of a frame it is touching, so it always has something to be the margin of; and it is the same hairline in the same place relative to the image as it was on the desktop, which is what a margin rule is. The caption group carries padding-bottom: var(--wp--preset--spacing--40), which is invisible on the desktop (the caption is far shorter than its row) and is the only thing keeping the note off the top edge of its frame once stacked.

• Notes right: the margin mirrors. The frame column comes first, the caption column second, the border moves to the frame group's RIGHT side and the insets swap with it. Same three frames, same proportions, same colours; only the composition changes, which keeps it to one axis. Stacked on a phone the frame comes first and the caption follows it, with the rule down the frames' right edge.

Inherits: every colour (the band is a base chain, its type and the headline a contrast chain, the rule currentColor), the typeface, and the spacing scale (spacing|70 above and below the band, spacing|60 between frames, spacing|50 under the headline, spacing|40 as the gutter between the caption and the rule, spacing|20 between a label and its line).

Decides: the 27/73 split and therefore where the rule falls; the clamp(1.5rem, 3vw, 3rem) inset that holds the frames off the rule, which puts the images at roughly 68% of the measure at 1240px; the 3:2 proportion of all three frames with scale: cover, so any upload is cropped to it; the 1240px measure and the clamp(1.25rem, 4vw, 4rem) gutters; and the type ramp, a max(0.8125rem, 13px) label at 0.22em tracking against a clamp(0.9375rem, 1.05vw, 1.0625rem) line at 1.55, with the headline at clamp(1.5rem, 2.4vw, 2.125rem) and -0.01em.

The label is set at 13px deliberately: it is a tracked caps eyebrow of under twenty characters, glanced at rather than read. The line under it IS read, so it states its own clamp with a 15px floor rather than taking a bare small preset, which is 13px in a theme with no size scale.

The photographs. All three images include example photographs; choose Replace to select an image from your media library, and the 3:2 crop and the layout are already set. The captions are the second thing. Each label reads best under twenty characters, and each line should be long enough to wrap two or three times in the margin column, because a one-line note leaves the margin looking empty beside a frame several times its height.

After that, the split. The 27% and 73% widths are on the two core/column blocks of every row; move them together, in every row, or the rule will step. The frames' inset (padding-left on the bordered group) is the only thing that separates the image from the rule, so widen it if you want a deeper margin without moving the line.

The base and the variation both take every colour and typeface from the theme, two out of two. Both were rendered at 1280 and 390, measured for contrast and looked at.

The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select an image or cover and choose Replace to use your own Media Library files. See image credits for the sources and licenses. Pasting an image URL does not import a Media Library attachment.