Lead and rail: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/lead-and-rail.html Core Patterns (https://patternpaste.com/patterns/) Gallery (https://patternpaste.com/patterns/gallery/) Free Standard # 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. Includes replaceable example images. ## All patterns Search patterns Loading patterns… The signature moment ## One lead against three, and the rail is locked to it The three squares and their two gaps are tuned to finish flush with the bottom of the lead, so the pair reads as one rectangle divided rather than a big image with thumbnails parked next to it. Theme handoff ## What comes from where ### Theme and pattern Inherits: every colour (the band is a base chain, its type and both caption lines a contrast chain, the hairline currentColor, which cannot blank and follows the theme's text wherever the theme puts it), the typeface, and the outer spacing scale (spacing|70 above and below, spacing|30 between the frames and the caption row and again above the caption text, spacing|20 between the caption's two lines when they wrap). Decides: the 85/15 split, the 16:9 and 1:1 ratios, the two gaps that lock them together, the 1240px measure and the clamp(1.25rem, 4vw, 4rem) gutters, the 1px currentColor rule under the pair, and the type proportion (a 13px tracked caps label at 0.22em, one 15px to 17px line at 1.55). All four images use scale: "cover", so whatever the buyer uploads is cropped to the ratio the composition needs rather than resizing it. 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 Four core/image frames in one row: a wide 16:9 lead in an 85% column, and a vertical rail of three 1:1 thumbnails in a 15% column beside it. Under the pair a two-part caption row sits below a currentColor hairline, a tracked caps label at one end and one short line at the other, in a flex row with space-between. Every frame includes an example photograph; choose Replace to select your own media. ### The signature moment: one lead against three, and the rail is locked to it The three squares and their two gaps are tuned to finish flush with the bottom of the lead, so the pair reads as one rectangle divided rather than a big image with thumbnails parked next to it. Three numbers make that true, and the arithmetic is worth stating because it is the whole design: - the columns gap is 1.5rem (24px), so at the 1240px measure the two columns share 1216px; - the rail column is 15% and the lead 85%, which is 182.4px and 1033.6px after core's flex shrink redistributes the gap (a column with a width becomes flex-basis with flex-grow: 0, and shrink is weighted by basis, so the 85/15 ratio survives the gap exactly); - the lead at 16:9 is therefore 581.4px tall; three squares are 547.2px, which leaves 34.2px for the two gaps, so the rail's blockGap is clamp(0.5rem, 1.2vw, 1.0625rem) and lands on 16.8px at the 1400px viewport this is authored for. That is 580.8px of rail against 581.4px of lead: half a pixel out at the authored width. The 1.2vw middle rung is not decoration; the ideal gap is 1.4% of the row's width, so a gap in vw tracks the shrinking row instead of drifting away from it. The clamp's 1.0625rem cap is exactly the ideal figure once the 1240px contentSize stops the row growing. The rail is narrow because the arithmetic demands it and not because a thin column looked nice. At 1:1, three stacked squares are three times the rail's width tall, and a 16:9 lead is only nine sixteenths of its own; so a rail wider than about 16% of the row cannot finish level with the lead however small the gap between the squares is made. A 28% rail would overhang it by more than the lead is tall. Be clear about what is exact and what is close. The flush finish is exact at the authored proportions, and stays inside a couple of pixels from the stacking point up to the measure's cap because both sides of the equation are proportions of the same row. It is approximate rather than exact once a theme's own scale moves the numbers: the outer padding, the 1240px measure and the gutters are all the theme's or ours to change, and any of them shifts the row's width slightly out of step with a vw gap. The gap between the three squares is stated as a length here rather than as var:preset|spacing|NN for exactly that reason: a spacing preset is a different size in Twenty Twenty-Four than in Twenty Twenty-Five, and a rail built on one would overhang the lead in the other and nothing would warn you. One case is worth naming: a theme that never opts into spacing.blockGap gets no generated gap rule at all, so the three squares meet edge to edge and the rail finishes about 34px short of the lead. The composition still reads; the lock does not, and it is the absent gap that took it away rather than the markup. It survives colourlessness because it is entirely proportion. Nothing in the signature is a colour, a weight or a face: it is 85/15, 16:9, 1:1 and a gap. In a theme with no presets at all it is the same composition, which is the opposite of a device that needs a tint to be visible. At 390 the composition survives as its own hierarchy. Core stacks core/columns below 782px and gives every column flex-basis: 100% !important, so the lead becomes a full-width 16:9 frame and the rail becomes three full-width squares under it, still in the reading order lead-then-rail. The flush finish is gone, because there is nothing left to be flush with, but the idea it exists to state, one frame that carries the room and three that answer it, is if anything louder: one wide frame, then three tall ones. The caption row's two halves wrap onto two lines and stay in order. Make it yoursVariations and the edits to make first ### Variations - Rail left: the same four frames mirrored. The rail column comes first at 15% and the lead second at 85%, and the caption row's two paragraphs swap so the tracked label stays on the lead's side. Every proportion, colour and string is otherwise identical to the base, which is the point: it is a composition variation on one axis, and it exists because a page that already leads left elsewhere wants the weight on the other side. At 390 the two are different patterns in one respect worth knowing: the mirrored file stacks rail-then-lead, so the three squares come first and the wide frame follows. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits, what it decides Inherits: every colour (the band is a base chain, its type and both caption lines a contrast chain, the hairline currentColor, which cannot blank and follows the theme's text wherever the theme puts it), the typeface, and the outer spacing scale (spacing|70 above and below, spacing|30 between the frames and the caption row and again above the caption text, spacing|20 between the caption's two lines when they wrap). Decides: the 85/15 split, the 16:9 and 1:1 ratios, the two gaps that lock them together, the 1240px measure and the clamp(1.25rem, 4vw, 4rem) gutters, the 1px currentColor rule under the pair, and the type proportion (a 13px tracked caps label at 0.22em, one 15px to 17px line at 1.55). All four images use scale: "cover", so whatever the buyer uploads is cropped to the ratio the composition needs rather than resizing it. Technical notesBlock mechanics, responsive behaviour and constraints ### The rule this pattern follows Type never sits on a photograph. Nothing here is set over an image: both caption lines are on the band's own base ground with a contrast chain for the type, below the frames rather than on them. A buyer's photographs can be any luminance at all and the two lines are measured as an ordinary guaranteed pair. ### What a buyer changes first The photographs. All four image blocks include example photographs; choose Replace to select an image, and the crop is already set. Choose the lead for a wide subject and the three rail frames for details of it; the rail is about 180px wide at the authored measure, so a face or a texture reads there and a landscape does not. The label is second. It is set in caps at 0.22em and reads best under about 26 characters; the line opposite it is one sentence and should not wrap at the desktop measure. If the two need more room than the row has, they wrap into two lines rather than shrinking, because the flex row is flexWrap: "wrap". To change the split, change three numbers together or the rail stops being locked: the two column widths, and the rail's blockGap. The relation is 3 x rail% + 2 gaps = 9/16 x lead% of the row. ### 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 ## Lead and rail: common questions Does Lead and rail need a plugin? No. It is built only from core WordPress blocks (column, columns, group, image and paragraph), so it pastes into the block editor with nothing to install. Will Lead and rail 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 Lead and rail have? 2: Lead left and Rail left. 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 Lead and rail free? Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Read the markup #### 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 Free Plugin None, core blocks only Variations 2 Colour From your theme Type From your theme Motion None Blocks column, columns, group, image, paragraph Presets color 5, spacing 3, font-size 1 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 ### Index strip A carousel standing still: one wide 3:2 lead frame at the full measure, a tracked label and a position counter under it, and a strip of five square thumbnails at equal width, the first one marked as current by a hairline rule beneath it. Gallery Preview pattern (https://patternpaste.com/pattern/index-strip.html) Shot in Twenty Twenty-Five Gallery No plugin needed ### 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. Gallery Preview pattern (https://patternpaste.com/pattern/margin-notes.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)