Page header rule: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/page-header-rule.html Core Patterns (https://patternpaste.com/patterns/) Page header (https://patternpaste.com/patterns/page-header/) Free Standard # 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. No action, no image and no coloured band, so it opens a page without competing with the section that follows it. ## All patterns Search patterns Loading patterns… Start here ## What to change first - The breadcrumb. It is one paragraph of plain text with slashes, not a list and not a navigation block, so it takes any trail you like. - The title. Built for one to three words. - The lede. One sentence. - The rule. It is a bottom border on the inner group. - The composition. Ship the base where the page needs a plain statement, and header-hang where the page has a wide left margin to hang the trail in. The signature moment ## The density collapse The signature is that there is nothing between 15px and 84px. The first thing on the page is a breadcrumb set at 15px with 0.22em of tracking, and the next thing under it is the title at up to 5.25rem with -0.04em of tracking on a 1.02 line height. No eyebrow rule, no kicker at an intermediate size, no panel: the eye falls off the quietest line in the section straight onto the largest, and that drop is the entire design. The lede comes back at 19px afterwards, which reads as the page settling rather than as a third step in a ramp. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing scale. ### Set by this pattern - Full bleed with a 1240px measure - The reading measure. - The type ramp - h1. 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 The opening of an interior page, and only that: a breadcrumb, the page title, one line of orientation, and a hairline closing the whole thing. Core blocks only: core/group, core/paragraph, core/heading. ### The signature moment: the density collapse The signature is that there is nothing between 15px and 84px. The first thing on the page is a breadcrumb set at 15px with 0.22em of tracking, and the next thing under it is the title at up to 5.25rem with -0.04em of tracking on a 1.02 line height. No eyebrow rule, no kicker at an intermediate size, no panel: the eye falls off the quietest line in the section straight onto the largest, and that drop is the entire design. The lede comes back at 19px afterwards, which reads as the page settling rather than as a third step in a ramp. The closing hairline is what makes it a header rather than a heading. It is a border-bottom on the group holding all three lines, so it runs the full 1240px measure and says where the page's furniture stops and the page's content starts. ### Why it is not a hero, deliberately The audit that produced this pattern found thirteen page templates and no page header: every interior page opened with a hero or with an editorial opener, and three did so visibly badly. So the things a hero has are the things this pattern refuses: - No action. There is no core/buttons in the file. An interior page's action belongs to the section that earns it, not to the line that names the page. - No image. No core/image, no core/cover, nothing to crop or replace. - No band ground. The ground asks for base, which is the page's own paper, so the header does not announce itself as a coloured band before the content arrives. It states the ground rather than inheriting it only so that the section is self-contained wherever it is pasted. - No height. The section is about 300px at 1400 and it is supposed to be. A compact pattern in a well-fitted frame is correct; the stage sizes itself to what the pattern actually renders. hero-ledger is the pattern that was doing this job in templates/contact-page and it is a spec sheet with an action beside a display headline. article-opener was doing it in templates/about-studio and it is a drop cap, a byline and a standfirst, which is furniture for one article rather than for a page. Make it yoursVariations and the edits to make first ### What to change first - The breadcrumb. It is one paragraph of plain text with slashes, not a list and not a navigation block, so it takes any trail you like. Delete it and the header still works; the collapse is then from the section above it. - The title. Built for one to three words. A longer title still sets, but the 5.25rem ceiling is where the collapse is strongest, so shorten the title before you shrink the type. - The lede. One sentence. If it needs two, widen the 38rem measure rather than letting it run the full band. - The rule. It is a bottom border on the inner group. Take it off and the header opens into the next section instead of closing. - The composition. Ship the base where the page needs a plain statement, and header-hang where the page has a wide left margin to hang the trail in. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. No font family is stated anywhere. The whole effect is tracking and scale, so it holds in a serif theme and in a sans one. - Your colours. The paper asks for base and the type for contrast, both ending on a colour WordPress itself guarantees, so neither can resolve to nothing. The closing rule is currentColor, so it is exactly the colour of the text above it and follows any recolouring you do. - Your spacing scale. Every vertical measure is a spacing preset, so a theme with a generous scale opens the page with more air. ### What it decides for itself - Full bleed with a 1240px measure, so the closing rule is a long rule rather than a dash in a body column. - The reading measure. The lede sits in a nested constrained group at 38rem with justifyContent: left, which holds it to about 65 characters and pins it to the same left edge as the title. That is the nested-group form, never padding-right on a direct child of a constrained band. - The type ramp: 15px / 0.22em against a clamp(2.5rem, 7vw, 5.25rem) title. The 7vw middle term is what keeps the collapse visible at 390, where the title is still about 27px against a 15px breadcrumb. - h1. This is the page's title, so it is a level 1 heading and it states its own colour, because a theme's theme.json heading element style beats a colour inherited from the wrapping group. Technical notesBlock mechanics, responsive behaviour and constraints ### Notes - Core blocks only: group, paragraph, heading. No plugin, no script. - Every colour is a fallback chain ending on a guaranteed colour, and the one rule in the pattern is currentColor. - There is no core/separator here on purpose. A separator that is not is-style-wide renders as a centred 100px stub in Twenty Twenty-Four; a group border cannot, and it is the border of the thing it is closing. Questions ## Page header rule: common questions Does Page header rule 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 rule match my theme? Choose by variation. Stacked and Hanging breadcrumb take your theme’s palette; Almond and bordeaux, Bough, Crumb, Folio, Mend, Spur and Vow bring its own colours. How many variations does Page header rule have? 9: Stacked, Almond and bordeaux, Bough, Crumb, Folio, Hanging breadcrumb, Mend, Spur and Vow. Each is its own markup; choose one in the toolbar above the preview before you copy. Is Page header rule free? Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. Its Styled looks come with a subscription. 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. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Its Styled looks come with a subscription. Read the markup 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 Free Plugin None, core blocks only Variations 9 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks group, heading, paragraph Presets color 5, 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 ### 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 ### Post header Single-post furniture, built as a lit plate on an unlit band: the post's category, title and byline sit on a paper plate held to 74% of the measure, while the publication date hangs outside it on the ink, aligned to the plate's foot. Page header Preview pattern (https://patternpaste.com/pattern/post-header.html) Shot in Twenty Twenty-Five Page header No plugin needed ### Page header cover strip An interior-page opener with a small location label, h1 title and short introduction in a narrow full-height plate of your theme's base beside a broad uninterrupted photograph. Page header Preview pattern (https://patternpaste.com/pattern/page-header-cover-strip.html)