[Library] Page header

Catalogue accessStandard

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.

Variation View
Before you copy
Open in a new window

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

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.

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.
Why it is not a hero, deliberately221 words

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.

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

Continue exploring

Next in Page header

Explore all 4 Page header patterns