Margin notes: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/margin-notes.html Core Patterns (https://patternpaste.com/patterns/) Gallery (https://patternpaste.com/patterns/gallery/) Catalogue access Standard # 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. ## All patterns Search patterns Loading patterns… 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. Theme handoff ## What comes from where ### Theme and pattern 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. 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 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 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. Make it yoursVariations and the edits to make first ### 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. Theme behaviourInheritance, fixed decisions and contrast ### 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. Technical notesBlock mechanics, responsive behaviour and constraints ### 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. ### 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 (https://patternpaste.com/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment. Questions ## Margin notes: common questions Does Margin notes need a plugin? No. It is built only from core WordPress blocks (column, columns, group, heading, image and paragraph), so it pastes into the block editor with nothing to install. Will Margin notes match my theme? Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted. How many variations does Margin notes have? 2: Notes left and Notes right. Each is its own markup; choose one in the toolbar above the preview before you copy. Can I use my own images? Yes. Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Is Margin notes free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 9.2KB of core-block markup, 6 blocks (column, columns, group, heading, image, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (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. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. 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 Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)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)Contact Contact cover ledger A full-bleed contact cover: a display heading in the top left, and a ruled ledger of address, hours, phone and email in the far lower-right corner, label left and value right between hairline rules, with the photograph running between them. A heavy veil of your theme's contrast colour keeps every line legible whatever photograph you choose. The ledger drops under the heading on a phone. Includes a replaceable example photograph. States no colour and no font of its own. Ships with a short hand-off row on your theme's paper below it. (https://patternpaste.com/pattern/contact-cover-ledger.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/). ## Specifications Section Gallery Access Subscription Plugin None, core blocks only Variations 2 Colour From your theme Type From your theme Motion None Blocks column, columns, group, heading, image, paragraph Presets color 5, spacing 5, font-size 2 WordPress 7.0+ Continue exploring ## Next in Gallery Explore all 30 Gallery patterns (https://patternpaste.com/patterns/gallery/) Shot in Twenty Twenty-Five Gallery No plugin needed ### Lead and rail One wide 16:9 lead frame with a vertical rail of three square thumbnails beside it, tuned so the rail finishes level with the bottom of the lead, and a two-part caption row under the pair. Gallery Preview pattern (https://patternpaste.com/pattern/lead-and-rail.html) Shot in Twenty Twenty-Five Gallery No plugin needed ### Plate lap Two photographs made into one object by overlap: a tall portrait frame with a smaller landscape frame lapping over its lower-right corner, hanging past both the bottom and the right edge, and a caption plate below squaring the pair back up. Gallery Preview pattern (https://patternpaste.com/pattern/plate-lap.html) Shot in Twenty Twenty-Five Gallery No plugin needed ### Proof strip A full-bleed band holding a narrow 34rem ribbon of four portrait frames stacked one under another, each ruled off by a hairline and captioned with a tracked title and one short line. Gallery Preview pattern (https://patternpaste.com/pattern/proof-strip.html)