Page header lap: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/page-header-lap.html Core Patterns (https://patternpaste.com/patterns/) Page header (https://patternpaste.com/patterns/page-header/) Catalogue access Standard # 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 Search patterns Loading patterns… 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 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. 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 year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Editorial Article footer The close of an article: a portrait of the author beside their name, the biography under both inside a currentColor slip held to the middle half of the measure, and the previous and the next post hanging off the two outer edges so the section reads as a doorway rather than a footer. The name, the biography and the two neighbours are dynamic core blocks, so they are the post's own and the preview here is sample data; the portrait is an ordinary image block you swap for your author's own. The previous and next links only resolve on a single post template, which is where this pattern belongs. (https://patternpaste.com/pattern/article-footer.html)Features Appointment letter checklist What to bring to a first appointment, set as the confirmation letter itself: a card with the booking's details written into ruled blanks (date, time, who, where, length and fee) and a checklist of empty squares to tick the night before, beside a short introduction. States no colour and no font of its own. (https://patternpaste.com/pattern/appointment-letter-checklist.html)Tables Compare matrix A capability matrix in a core table: one row per capability, one column for each of the two plans people choose between, and a mark in every cell, with a third plan named in one line under the table instead of a fourth column that would ladder its row headers on a phone. The recommended column is announced by a two-pixel bracket that stands over it and hands off to the table's own hairlines, so nothing is filled and nothing is coloured. Three fixed columns hold roughly 117 pixels each at 390. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-matrix.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) ## Specifications Section Page header Access Subscription Plugin None, core blocks only Variations 3 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks group, heading, paragraph Presets color 4, spacing 4, font-size 2 WordPress 7.0+ Continue exploring ## Next in Page header Explore all 6 Page header patterns (https://patternpaste.com/patterns/page-header/) Shot in Twenty Twenty-Five Page header No plugin needed ### Facts beside the title An interior-page opening that splits in two: a small tracked kicker and the page title hold the left 46% on their own, and the right 54% carries four facts as a ruled ledger, label against value on each line, divided by currentColor hairlines and closed by one at the foot. Page header Preview pattern (https://patternpaste.com/pattern/page-header-facts.html) Shot in Twenty Twenty-Five Page header No plugin needed ### Page header meta An interior-page opening for a page whose facts matter as much as its name: a small tracked kicker, a title set deliberately low, and four facts on one ruled row beneath it, divided by currentColor hairlines rather than boxed into chips. Page header Preview pattern (https://patternpaste.com/pattern/page-header-meta.html) Shot in Twenty Twenty-Five Page header No plugin needed ### Page header rule The opening of an interior page, and nothing more: a tiny widely tracked breadcrumb, the page title at display size directly under it, one line of orientation held to a reading measure, and a currentColor hairline closing the whole thing. Page header Preview pattern (https://patternpaste.com/pattern/page-header-rule.html)