# Margin notes > Three stacked 3:2 photograph frames in a wide right-hand column, each with its caption hanging in a narrow left margin, and a single 1px rule running unbroken down the join for the whole height of the section. The rule is a per-side border in currentColor, so it follows your theme's text colour. Includes replaceable example images. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/margin-notes.html Section: Gallery 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, heading, image, paragraph Keywords: gallery, images, caption, margin, rule, stacked, editorial ## Variations (2) ### Notes left (the default) Identical markup in every theme. Captions hang in the left margin, frames run down the right, and one continuous hairline separates them from the top of the first frame to the bottom of the last. On a phone the two columns stack and the hairline becomes a left rule beside each frame. ### Notes right Identical markup in every theme. The same three frames with the margin mirrored: captions hang on the right and the continuous hairline runs down the frames' right edge. Use it when the section sits opposite something that already leans left. --- ## The signature moment: one rule runs the whole height 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. ## What it inherits, what it decides 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. ## What a buyer changes first 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. ## Variations - **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. ## Measured 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. ## Included images 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](/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment.