# 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. Canonical: https://patternpaste.com/pattern/page-header-lap.html Section: Page header Access: Included in Pattern Paste access. Needs: 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. Blocks: group, heading, paragraph Keywords: page header, page title, inverted, band, overlap, lap, interior page ## Variations (3) ### Page header lap (the default) Identical markup in every theme. ### Plum and blush This variation states its own colours and states its own type: identical in every theme. States a deep plum band, a blush lap sheet and an Iowan Old Style title, giving this interior opening a warm editorial character in every theme. ### Vow This variation states its own colours and states its own type: identical in every theme. The Vow wedding set: a country lane running off to the fields, a wisteria sheet lapping its foot under a peony rule, Travel and stay in Didot, a square midnight button and a peony link in Gill Sans. --- ## 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. ## 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. ## 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. ## 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.