A full-bleed opening section built on core blocks only. An asymmetric two-column split: a wide measure of display type on the left, a narrow, densely set meta column on the right.
The signature moment
Scale collision
There is one idea in this pattern and everything else is held quiet so you can see it.
The headline is set at display size, up to 5.5rem, with tight negative tracking and a line-height of 0.92. Immediately beside it, sharing the same baseline, sits a meta column set at 11px and 13px. Nothing of an intermediate size stands between them: no sub-heading, no icon, no card stack softening the jump. The two scales meet directly, and the gap between them is the design.
The second half of the moment is the rule. Above the headline there is an eyebrow, and under the eyebrow a solid bar that deliberately overruns its own column: the type column stops at 62% of the container, the bar carries on to 80%, crossing the gutter and finishing above the meta column. A rule that stops where its column stops is invisible. This one does not, so it reads as a structural mark rather than a divider.
What it inherits from your theme
Almost everything you would think of as the look:
- Every typeface. The pattern states no font family, anywhere. Headline and meta both render in whatever your theme.json sets.
- Every colour it can. The ground uses your
base, the text uses yourcontrast, the overrun bar reaches foraccent-2thenaccent, and the meta panel reaches forbase-2thenaccent-3as a soft wash. Each of those is a fallback chain that ends on a colour WordPress itself guarantees, so nothing in the pattern can render as invisible in a theme that does not define the slug it asked for first. - Spacing rhythm. All the padding and gaps use core spacing presets 20 to 80, which your theme rescales. The same pattern breathes differently in Twenty Twenty-Four than in Twenty Twenty-Five, on purpose.
- Button shape and hover. The buttons carry
wp-element-button, so your theme's button element styles apply.
The panel border and the hairlines inside the meta column are currentColor, which means they follow your text colour wherever your theme puts it. They cannot go missing and they cannot clash.
What it decides for itself
- Proportion. 62 / 34 on the collision row, and 80% for the overrunning bar. These are the composition and are not meant to be neutral.
- The type ramp.
clamp(2.75rem, 7vw, 5.5rem)on the headline so it scales with the viewport instead of stepping at a breakpoint, plus the tracking and line-height that make a display size look set rather than merely enlarged. - Full-bleed with its own measure. The section runs edge to edge and holds its content to 1240px, rather than inheriting your body's reading width and rendering as a narrow column in the middle of a wide band.
- Where things stack. The eyebrow row and the bar row never stack, so the overrun survives on a phone. The headline, the meta column and the closing row do stack below 782px.
- Contrast intent. Text sits on
baseor on a light wash and uses thecontrastchain, so it is aiming at the 4.5:1 bar for the lede and meta and the 3:1 large-text bar for the headline. The bar and the hairlines are non-text marks aiming at 3:1. Measure it in your own theme before you ship; a chain guarantees a colour, not a particular one.
What to change first
- The headline. It is the whole pattern. Keep it short enough to break over two or three lines at your widths; a headline that runs to five lines loses the collision.
- The four meta rows. Swap
01 / Formatthrough04 / Licencefor your own facts: delivery time, guarantee, stack, region. Keep them terse. The column works because it is dense, not because of what it says. - The two buttons and their labels. The first is filled with your
contrast, the second is an outline incurrentColor. - The wash, if your theme has no
base-2. If the panel looks flat, point the group's first chain rung at whichever pale accent your theme actually defines. Leave the last rung alone: it is what stops the panel disappearing in a theme with no presets at all.
If you want the collision harder, raise the clamp ceiling and drop the meta column's font sizes. If you want it softer, this is probably the wrong pattern.
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.
9,759 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|50","padding":{"top":"var:preset|spacing|80","bottom":"var:preset|spacing|80","left":"var:preset|spacing|50","right":"var:preset|spacing|50"}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background" 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--80);padding-right:var(--wp--preset--spacing--50);padding-bottom:var(--wp--preset--spacing--80);padding-left:var(--wp--preset--spacing--50)"><!-- wp:columns {"isStackedOnMobile":false} -->
<div class="wp-block-columns is-not-stacked-on-mobile"><!-- wp:column {"width":"62%"} -->
<div class="wp-block-column" style="flex-basis:62%"><!-- wp:paragraph {"style":{"typography":{"fontSize":"0.75rem","fontWeight":"600","letterSpacing":"0.22em","lineHeight":"1","textTransform":"uppercase"},"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));font-size:0.75rem;font-weight:600;letter-spacing:0.22em;line-height:1;text-transform:uppercase">Pattern library</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:columns {"isStackedOnMobile":false} -->
<div class="wp-block-columns is-not-stacked-on-mobile"><!-- wp:column {"width":"80%"} -->
<div class="wp-block-column" style="flex-basis:80%"><!-- wp:group {"style":{"color":{"background":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"var:preset|spacing|20"},"padding":{"top":"4px"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-background" style="background-color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:var(--wp--preset--spacing--20);padding-top:4px"></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:columns {"verticalAlignment":"bottom","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|50","left":"var:preset|spacing|70"}}}} -->
<div class="wp-block-columns are-vertically-aligned-bottom"><!-- wp:column {"verticalAlignment":"bottom","width":"62%"} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:62%"><!-- wp:heading {"level":1,"style":{"typography":{"fontSize":"var(--wp--preset--font-size--xx-large, clamp(2.75rem, 7vw, 5.5rem))"}}} -->
<h1 class="wp-block-heading" style="font-size:var(--wp--preset--font-size--xx-large, clamp(2.75rem, 7vw, 5.5rem))">Sections that arrive already wearing your theme.</h1>
<!-- /wp:heading --></div>
<!-- /wp:column -->
<!-- wp:column {"verticalAlignment":"bottom","width":"34%"} -->
<div class="wp-block-column is-vertically-aligned-bottom" style="flex-basis:34%"><!-- wp:group {"style":{"border":{"width":"1px","color":"currentColor"},"color":{"background":"var(--wp--preset--color--base-2, var(--wp--preset--color--base, var(--wp--preset--color--white)))"},"spacing":{"padding":{"top":"var:preset|spacing|40","bottom":"var:preset|spacing|40","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group has-border-color has-background" style="border-color:currentColor;border-width:1px;background-color:var(--wp--preset--color--base-2, var(--wp--preset--color--base, var(--wp--preset--color--white)));padding-top:var(--wp--preset--spacing--40);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--40);padding-left:var(--wp--preset--spacing--40)"><!-- wp:paragraph {"style":{"typography":{"fontSize":"clamp(clamp(0.875rem, 1vw, 0.8125rem), 0.9vw, 0.6875rem)","fontWeight":"600","letterSpacing":"0.18em","lineHeight":"1.2","textTransform":"uppercase"}}} -->
<p style="font-size:clamp(clamp(0.875rem, 1vw, 0.8125rem), 0.9vw, 0.6875rem);font-weight:600;letter-spacing:0.18em;line-height:1.2;text-transform:uppercase">01 / Format</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}},"typography":{"fontSize":"clamp(0.875rem, 1vw, 0.8125rem)"}}} -->
<p style="margin-top:var(--wp--preset--spacing--20);font-size:clamp(0.875rem, 1vw, 0.8125rem)">Core blocks. Copy, paste, done.</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"className":"is-style-wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}}} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"clamp(clamp(0.875rem, 1vw, 0.8125rem), 0.9vw, 0.6875rem)","fontWeight":"600","letterSpacing":"0.18em","lineHeight":"1.2","textTransform":"uppercase"}}} -->
<p style="font-size:clamp(clamp(0.875rem, 1vw, 0.8125rem), 0.9vw, 0.6875rem);font-weight:600;letter-spacing:0.18em;line-height:1.2;text-transform:uppercase">02 / Styling</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}},"typography":{"fontSize":"clamp(0.875rem, 1vw, 0.8125rem)"}}} -->
<p style="margin-top:var(--wp--preset--spacing--20);font-size:clamp(0.875rem, 1vw, 0.8125rem)">Inherited from your theme.json presets.</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"className":"is-style-wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}}} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"clamp(clamp(0.875rem, 1vw, 0.8125rem), 0.9vw, 0.6875rem)","fontWeight":"600","letterSpacing":"0.18em","lineHeight":"1.2","textTransform":"uppercase"}}} -->
<p style="font-size:clamp(clamp(0.875rem, 1vw, 0.8125rem), 0.9vw, 0.6875rem);font-weight:600;letter-spacing:0.18em;line-height:1.2;text-transform:uppercase">03 / Install</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}},"typography":{"fontSize":"clamp(0.875rem, 1vw, 0.8125rem)"}}} -->
<p style="margin-top:var(--wp--preset--spacing--20);font-size:clamp(0.875rem, 1vw, 0.8125rem)">No plugin, no updater, no build step.</p>
<!-- /wp:paragraph -->
<!-- wp:separator {"className":"is-style-wide","style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30"}}}} -->
<hr class="wp-block-separator has-alpha-channel-opacity is-style-wide" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:var(--wp--preset--spacing--30)"/>
<!-- /wp:separator -->
<!-- wp:paragraph {"style":{"typography":{"fontSize":"clamp(clamp(0.875rem, 1vw, 0.8125rem), 0.9vw, 0.6875rem)","fontWeight":"600","letterSpacing":"0.18em","lineHeight":"1.2","textTransform":"uppercase"}}} -->
<p style="font-size:clamp(clamp(0.875rem, 1vw, 0.8125rem), 0.9vw, 0.6875rem);font-weight:600;letter-spacing:0.18em;line-height:1.2;text-transform:uppercase">04 / Licence</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"var:preset|spacing|20"}},"typography":{"fontSize":"clamp(0.875rem, 1vw, 0.8125rem)"}}} -->
<p style="margin-top:var(--wp--preset--spacing--20);font-size:clamp(0.875rem, 1vw, 0.8125rem)">Yours to edit, fork and keep.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->
<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"54%"} -->
<div class="wp-block-column" style="flex-basis:54%"><!-- wp:paragraph {"fontSize":"medium"} -->
<p class="has-medium-font-size">Core-block markup that states no colour and no typeface of its own. Paste one into any block theme and it inherits the design system you already built.</p>
<!-- /wp:paragraph -->
<!-- wp:buttons {"style":{"spacing":{"margin":{"top":"var:preset|spacing|40"},"blockGap":"var:preset|spacing|30"}}} -->
<div class="wp-block-buttons" style="margin-top:var(--wp--preset--spacing--40)"><!-- wp:button {"style":{"spacing":{"padding":{"top":"1rem","bottom":"1rem","left":"1.75rem","right":"1.75rem"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="padding-top:1rem;padding-right:1.75rem;padding-bottom:1rem;padding-left:1.75rem">Browse the catalogue</a></div>
<!-- /wp:button -->
<!-- wp:button {"style":{"color":{"background":"transparent","text":"var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"border":{"width":"1px","color":"currentColor"},"spacing":{"padding":{"top":"1rem","bottom":"1rem","left":"1.75rem","right":"1.75rem"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background has-border-color wp-element-button" style="border-color:currentColor;border-width:1px;color:var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));background-color:transparent;padding-top:1rem;padding-right:1.75rem;padding-bottom:1rem;padding-left:1.75rem">Take the free theme</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->