[Library] 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. States no colour or font of its own.

View
Before you copy

Identical markup in every theme. Manrope typeface rgb(255, 255, 255) ground 1280px viewport

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.

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.

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.
The differentiation audit53 words

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.

Notes37 words
  • 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.
Back to the library