Pattern Paste
Subscribe

Core Patterns Gallery

FreeStandard

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

Loading patterns…

Theme
Preview size
Look
Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

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 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.

The markup

Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks. This is the file as authored; the copy button on the stage applies the finish you chose there.

4,418 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"blockGap":"var:preset|spacing|30","padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"}},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:var(--wp--preset--spacing--70);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--70);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"1.5rem","left":"1.5rem"}}}} -->
<div class="wp-block-columns"><!-- wp:column {"width":"85%"} -->
<div class="wp-block-column" style="flex-basis:85%"><!-- wp:image {"aspectRatio":"16/9","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://pd.w.org/2026/05/4016a0c06d0363686.50882683-1152x1536.jpeg" alt="Dried flowers in a slender white vase against a dark green wall." style="aspect-ratio:16/9;object-fit:cover"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"15%","style":{"spacing":{"blockGap":"0.75rem"}}} -->
<div class="wp-block-column" style="flex-basis:15%"><!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://pd.w.org/2026/09/8226a96f19a8f6af4.18692764-1152x1536.jpg" alt="An ornate pale stone palace with a green roof beneath a cloudy sky." style="aspect-ratio:1;object-fit:cover"/></figure>
<!-- /wp:image -->

<!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://pd.w.org/2026/08/1236a7b435955b1a1.89997651-1536x1152.jpeg" alt="An open stone temple pavilion with carved columns in a paved courtyard." style="aspect-ratio:1;object-fit:cover"/></figure>
<!-- /wp:image -->

<!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://pd.w.org/2026/09/5456a96eac1a20c70.83624730-1152x1536.jpg" alt="A coastal town with terracotta rooftops beside a calm blue sea." style="aspect-ratio:1;object-fit:cover"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","width":"1px","style":"solid"}},"spacing":{"blockGap":{"top":"var:preset|spacing|20","left":"1.875rem"},"padding":{"top":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"top"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--30)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.8125rem, 0.9vw, 0.875rem)","fontWeight":"600","letterSpacing":"0.22em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:clamp(0.8125rem, 0.9vw, 0.875rem);font-weight:600;letter-spacing:0.22em;text-transform:uppercase">Series four, collected views</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1.0625rem))"}}} -->
<p style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1.0625rem))">One long look, and three short ones beside it.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Variation: Rail left
4,418 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"blockGap":"var:preset|spacing|30","padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|70","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"}},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:var(--wp--preset--spacing--70);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--70);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:columns {"style":{"spacing":{"blockGap":{"top":"1.5rem","left":"1.5rem"}}}} -->
<div class="wp-block-columns"><!-- wp:column {"width":"15%","style":{"spacing":{"blockGap":"0.75rem"}}} -->
<div class="wp-block-column" style="flex-basis:15%"><!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://pd.w.org/2026/05/4016a0c06d0363686.50882683-1152x1536.jpeg" alt="Dried flowers in a slender white vase against a dark green wall." style="aspect-ratio:1;object-fit:cover"/></figure>
<!-- /wp:image -->

<!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://pd.w.org/2026/09/8226a96f19a8f6af4.18692764-1152x1536.jpg" alt="An ornate pale stone palace with a green roof beneath a cloudy sky." style="aspect-ratio:1;object-fit:cover"/></figure>
<!-- /wp:image -->

<!-- wp:image {"aspectRatio":"1","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://pd.w.org/2026/08/1236a7b435955b1a1.89997651-1536x1152.jpeg" alt="An open stone temple pavilion with carved columns in a paved courtyard." style="aspect-ratio:1;object-fit:cover"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column -->

<!-- wp:column {"width":"85%"} -->
<div class="wp-block-column" style="flex-basis:85%"><!-- wp:image {"aspectRatio":"16/9","scale":"cover","sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://pd.w.org/2026/09/5456a96eac1a20c70.83624730-1152x1536.jpg" alt="A coastal town with terracotta rooftops beside a calm blue sea." style="aspect-ratio:16/9;object-fit:cover"/></figure>
<!-- /wp:image --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

<!-- wp:group {"style":{"border":{"top":{"color":"currentColor","width":"1px","style":"solid"}},"spacing":{"blockGap":{"top":"var:preset|spacing|20","left":"1.875rem"},"padding":{"top":"var:preset|spacing|30"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"top"}} -->
<div class="wp-block-group" style="border-top-color:currentColor;border-top-style:solid;border-top-width:1px;padding-top:var(--wp--preset--spacing--30)"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1.0625rem))"}}} -->
<p style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(0.9375rem, 1.05vw, 1.0625rem))">One long look, and three short ones beside it.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.8125rem, 0.9vw, 0.875rem)","fontWeight":"600","letterSpacing":"0.22em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:clamp(0.8125rem, 0.9vw, 0.875rem);font-weight:600;letter-spacing:0.22em;text-transform:uppercase">Series four, collected views</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Back to Core Patterns

Continue exploring

Next in Gallery

Explore all 30 Gallery patterns

Index strip rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveGalleryNo 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.

GalleryPreview pattern
Margin notes rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveGalleryNo 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.

GalleryPreview pattern
Plate lap rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveGalleryNo 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.

GalleryPreview pattern