Start here
What to change first
- The breadcrumb. Keep it short enough to remain an incidental label.
- The title. Built for one to four words.
- The lede. Keep it to one sentence at the 38rem measure.
- The lap depth. If you pull past
-3rem, increase the band's bottom padding by the same amount so the h1 remains below the colour boundary.
The signature moment
One sheet crosses the boundary
The signature is the lap itself. The sheet starts inside the inverted band and finishes on the page ground. The title and lede remain on one guaranteed surface while the sheet carries the crossing. This gives the header a loud structural move without using an image, an accent colour or an oversized facts row.
Theme handoff
What comes from where
From your theme
- The typeface.
- Your colours.
- Your type ladder.
- Your vertical rhythm.
Set by this pattern
- Full bleed with a 1240px ceiling.
- Semantic reading order.
- The reading measure.
- The lap geometry.
- The label mark.
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
An interior-page opening with a tracked breadcrumb on an inverted band, then a page title and one line of orientation on a sheet that laps over the band's lower edge. Core blocks only: core/group, core/paragraph, core/heading.
The signature moment: one sheet crosses the boundary
The signature is the lap itself. The sheet starts inside the inverted band and finishes on the page ground. The title and lede remain on one guaranteed surface while the sheet carries the crossing. This gives the header a loud structural move without using an image, an accent colour or an oversized facts row.
The overlap is clamp(-3rem, -4.5vw, -1.75rem): 48px on a wide desktop and 28px on a phone. The sheet's top padding closely matches that depth, so the h1 starts at the band's lower edge rather than sitting directly on two grounds.
Make it yoursVariations and the edits to make first
What to change first
- The breadcrumb. Keep it short enough to remain an incidental label.
- The title. Built for one to four words. Shorten a title before shrinking the h1.
- The lede. Keep it to one sentence at the 38rem measure.
- The lap depth. If you pull past
-3rem, increase the band's bottom padding by the same amount so the h1 remains below the colour boundary.
Theme behaviourInheritance, fixed decisions and contrast
What it inherits from your theme
- The typeface. No font family is stated.
- Your colours. The band asks for
contrast; the sheet asks forbase. Every text block states the opposite chain explicitly, including the h1, so a theme's heading colour cannot produce dark type on a dark band. - Your type ladder. The title uses the
xx-largerung with a fluid fallback, and the lede usesmediumwith a fluid fallback. - Your vertical rhythm. The section's padding uses the theme's spacing scale.
What it decides for itself
- Full bleed with a 1240px ceiling. The root and band are full width. Their matching outer padding fixes the sheet edge at every viewport. A second fluid inset, 20px on a phone and 40px on a wide screen, puts the breadcrumb, title and lede on one inner axis instead of leaving the large h1 flush against the sheet edge. The earlier version put horizontal margins on a constrained child; WordPress's auto margins beat those values, so the alignment drifted with the host theme's root padding.
- Semantic reading order. Breadcrumb, h1, then lede. The first version put the orientation sentence before the h1 because it was painted in the band.
- The reading measure. The lede is held to 38rem and left justified.
- The lap geometry. The sheet is the root's second child, so its negative top margin cannot collapse through the parent. Its left and right inset is a smaller clamp than the outer gutter, which keeps the plate legible without making a phone title narrow.
- The label mark. The breadcrumb is a 13 to 14px uppercase paragraph at 0.22em tracking. It does not use
role-label, because that role is derived for the section ground and this label sits on an inverted surface painted by the pattern.
Technical notesBlock mechanics, responsive behaviour and constraints
The differentiation audit
Run before authoring, per the skill. Within page-header, page-header-rule is a straight stack closed by a hairline, while page-header-meta ends in a dense facts row. Neither breaks its own ground. editorial-lap and cover-lap use a related overlap around photographs; this pattern has no image and applies the move to a compact interior-page header.
Notes
- No plugin, script, image, border or separator.
- Every colour is a fallback chain ending on a guaranteed core colour.
- The title is large text. All other copy is held to the body-text contrast bar.
Questions
Page header lap: common questions
Does Page header lap need a plugin?
No. It is built only from core WordPress blocks (group, heading and paragraph), so it pastes into the block editor with nothing to install.
Will Page header lap match my theme?
Choose by variation. Page header lap takes your theme’s palette; Plum and blush and Vow bring its own colours.
How many variations does Page header lap have?
3: Page header lap, Plum and blush and Vow. Each is its own markup; choose one in the toolbar above the preview before you copy.
Is Page header lap free?
It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one.
Which WordPress version does it need?
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.
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.
Fetching the markup…Variation: Plum and blush
Fetching the markup…Variation: Vow
Fetching the markup…