Pattern Paste
Subscribe

Core Patterns Page header

Catalogue accessStandard

Page header lap

An interior-page opening with a tracked breadcrumb on an inverted band, then the page title and one line of orientation on a sheet of your base that laps over the band's lower edge.

The breadcrumb, title and lede share one fluidly inset left edge at every width. No action, image or facts row.

All patterns

Loading patterns…

Theme
Preview size
Look

Takes your theme’s colours and type.

Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

Start here

What to change first

  1. The breadcrumb. Keep it short enough to remain an incidental label.
  2. The title. Built for one to four words.
  3. The lede. Keep it to one sentence at the 38rem measure.
  4. 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

  1. The breadcrumb. Keep it short enough to remain an incidental label.
  2. The title. Built for one to four words. Shorten a title before shrinking the h1.
  3. The lede. Keep it to one sentence at the 38rem measure.
  4. 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 for base. 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-large rung with a fluid fallback, and the lede uses medium with 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

4.7KB of core-block markup, 3 blocks (group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme.

Subscribe to copy it, £49 a yearWhat you copy is yours forever. Not for you? We refund within 14 days.

Back to Core Patterns