# 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. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/page-header-rule.html Section: Page header Access: Free, and free to keep. 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, breadcrumb, interior page, title, lede, rule ## Variations (9) ### Stacked (the default) Identical markup in every theme. Breadcrumb, title, lede, rule, in that order and at that measure. Your base as the paper, your contrast as the type, and the closing rule in currentColor so it follows the text wherever your theme puts it. ### Almond and bordeaux This variation states its own colours and states its own type: identical in every theme. States an almond ground, dark cocoa ink and a bordeaux Georgia title, closing rule and pill enquiry button, for a restaurant or pub inner page. ### Bough This variation states its own colours and states its own type: identical in every theme. The Bough tree surgeon set: a lichen-tinted band, a pine label naming the page, Services in bold Rockwell at display size over a 6px leaf-green rule, a muted Trebuchet lede, a filled pine Book a free survey button and an underlined call link. ### Crumb This variation states its own colours and states its own type: identical in every theme. The Crumb café set: an oat Menu header with a terracotta breadcrumb and closing rule, an espresso Georgia title, a pill Book a table button and a Dietary notes text link over Helvetica. ### Folio This variation states its own colours and states its own type: identical in every theme. The Folio photographer set: a paper header with a monospace breadcrumb behind a safelight rule, Work in Helvetica at full display size with tight tracking, one line held to a reading measure beside a monospace index note, and a graphite hairline. ### Hanging breadcrumb Identical markup in every theme. The composition changes rather than the colour: the breadcrumb leaves the stack and hangs in a third-width margin beside the title, and the closing rule runs only under the title column, so the header has a stepped left edge instead of a straight one. ### Mend This variation states its own colours and states its own type: identical in every theme. The Mend physio set: clinical white ground, deep teal ink, a sage label naming the page, a display title over an apricot rule, a teal 6px-corner button and an underlined link, all in Avenir Next. ### Spur This variation states its own colours and states its own type: identical in every theme. The Spur electrician and plumber set: a switch-white ground, a live-blue label naming the page, the title in Arial Black at display size over a 4px cable-black rule, a slate lede, a square live-blue button and an underlined link. ### Vow This variation states its own colours and states its own type: identical in every theme. The Vow wedding set: a wisteria band, RSVP and gifts in Didot with an italic and, a peony hairline under the header, a square midnight button and a peony link in Gill Sans. --- ## 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. ## 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. ## What to change first 1. **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. 2. **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. 3. **The lede.** One sentence. If it needs two, widen the 38rem measure rather than letting it run the full band. 4. **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. 5. **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. ## 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.