Pattern Paste
Subscribe

Core Patterns Page header

FreeStandard

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

Loading patterns…

Theme
Preview size
Look

Takes your theme’s colours and type.

Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

Start here

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.
  2. The title. Built for one to three words.
  3. The lede. One sentence.
  4. The rule. It is a bottom border on the inner group.
  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.

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

  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.
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.

The markup

Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks. This is the file as authored; the copy button on the stage applies the finish you chose there.

3,205 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|40","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"},"blockGap":"0"},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:var(--wp--preset--spacing--70);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--40);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:group {"style":{"border":{"bottom":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"bottom":"var:preset|spacing|50"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-bottom-color:currentColor;border-bottom-style:solid;border-bottom-width:1px;padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"clamp(0.9375rem, 1vw, 1rem)","fontWeight":"600","letterSpacing":"0.22em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:0;font-size:clamp(0.9375rem, 1vw, 1rem);font-weight:600;letter-spacing:0.22em;text-transform:uppercase">Studio / How we work / Engagements</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":1,"style":{"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--xx-large, clamp(2.5rem, 7vw, 5.25rem))"}}} -->
<h1 class="wp-block-heading" style="margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:var(--wp--preset--font-size--xx-large, clamp(2.5rem, 7vw, 5.25rem))">Engagements</h1>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40"}}},"layout":{"type":"constrained","contentSize":"38rem","justifyContent":"left"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--40)"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.2vw, 1.1875rem))"}}} -->
<p style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.2vw, 1.1875rem))">Three ways to work with the studio, from a two-week diagnostic to a year on retainer, each with the same fixed dates and the same written brief.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Variation: Folio
4,322 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"#f8f5ef","text":"#141517"},"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|40","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"},"blockGap":"0"},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontWeight":"400"}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background" style="color:#141517;background-color:#f8f5ef;padding-top:var(--wp--preset--spacing--70);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--40);padding-left:clamp(1.25rem, 4vw, 4rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:400"><!-- wp:group {"style":{"border":{"bottom":{"color":"#5b5f66","style":"solid","width":"1px"}},"spacing":{"padding":{"bottom":"var:preset|spacing|40"},"blockGap":"0"}},"layout":{"type":"default"}} -->
<div class="wp-block-group" style="border-bottom-color:#5b5f66;border-bottom-style:solid;border-bottom-width:1px;padding-bottom:var(--wp--preset--spacing--40)"><!-- wp:paragraph {"style":{"border":{"left":{"color":"#c8432b","style":"solid","width":"3px"}},"color":{"text":"#5b5f66"},"spacing":{"margin":{"top":"0","bottom":"0"},"padding":{"left":"0.75rem"}},"typography":{"fontFamily":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace","fontSize":"0.8125rem","fontWeight":"400","letterSpacing":"0.06em","lineHeight":"1.4","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="border-left-color:#c8432b;border-left-style:solid;border-left-width:3px;color:#5b5f66;padding-left:0.75rem;margin-top:0;margin-bottom:0;font-size:0.8125rem;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-weight:400;letter-spacing:0.06em;line-height:1.4;text-transform:uppercase">Ada Lindqvist / Work</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":1,"style":{"color":{"text":"#141517"},"spacing":{"margin":{"top":"var:preset|spacing|30","bottom":"0"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(4.5rem, 13vw, 11rem)","fontWeight":"500","letterSpacing":"-0.04em","lineHeight":"0.9"}}} -->
<h1 class="wp-block-heading has-text-color" style="color:#141517;margin-top:var(--wp--preset--spacing--30);margin-bottom:0;font-size:clamp(4.5rem, 13vw, 11rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:500;letter-spacing:-0.04em;line-height:0.9">Work</h1>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"margin":{"top":"var:preset|spacing|40"},"blockGap":{"top":"1rem","left":"2rem"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"space-between","verticalAlignment":"bottom"}} -->
<div class="wp-block-group" style="margin-top:var(--wp--preset--spacing--40)"><!-- wp:group {"style":{"layout":{"selfStretch":"fixed","flexSize":"32rem"}},"layout":{"type":"default"}} -->
<div class="wp-block-group"><!-- wp:paragraph {"style":{"color":{"text":"#141517"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontFamily":"Helvetica Neue, Helvetica, Arial, sans-serif","fontSize":"clamp(1.0625rem, 1.3vw, 1.25rem)","fontWeight":"400","lineHeight":"1.55"}}} -->
<p class="has-text-color" style="color:#141517;margin-top:0;margin-bottom:0;font-size:clamp(1.0625rem, 1.3vw, 1.25rem);font-family:Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:400;line-height:1.55">Places, rooms and the books they went into. A hundred and forty shoots since 2019; these are the ones I would show you first.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group -->

<!-- wp:paragraph {"style":{"color":{"text":"#5b5f66"},"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontFamily":"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace","fontSize":"0.8125rem","fontWeight":"400","letterSpacing":"0.06em","lineHeight":"1.45","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:#5b5f66;margin-top:0;margin-bottom:0;font-size:0.8125rem;font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;font-weight:400;letter-spacing:0.06em;line-height:1.45;text-transform:uppercase">Index / 2019 to 2026</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:group -->
Variation: Hanging breadcrumb
3,709 bytes 
<!-- wp:group {"align":"full","style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"padding":{"top":"var:preset|spacing|70","bottom":"var:preset|spacing|40","left":"clamp(1.25rem, 4vw, 4rem)","right":"clamp(1.25rem, 4vw, 4rem)"},"blockGap":"0"},"elements":{"heading":{"color":{"text":"currentColor"}},"link":{"color":{"text":"currentColor"}}}},"layout":{"type":"constrained","contentSize":"1240px"}} -->
<div class="wp-block-group alignfull has-text-color has-background has-link-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:var(--wp--preset--spacing--70);padding-right:clamp(1.25rem, 4vw, 4rem);padding-bottom:var(--wp--preset--spacing--40);padding-left:clamp(1.25rem, 4vw, 4rem)"><!-- wp:columns {"verticalAlignment":"top","style":{"spacing":{"blockGap":{"top":"var:preset|spacing|30","left":"1.875rem"}}}} -->
<div class="wp-block-columns are-vertically-aligned-top"><!-- wp:column {"verticalAlignment":"top","width":"36%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:36%"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0.6rem","bottom":"0"}},"typography":{"fontSize":"clamp(0.9375rem, 1vw, 1rem)","fontWeight":"600","letterSpacing":"0.22em","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0.6rem;margin-bottom:0;font-size:clamp(0.9375rem, 1vw, 1rem);font-weight:600;letter-spacing:0.22em;text-transform:uppercase">Studio / How we work / Engagements</p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column {"verticalAlignment":"top","width":"64%"} -->
<div class="wp-block-column is-vertically-aligned-top" style="flex-basis:64%"><!-- wp:group {"style":{"border":{"bottom":{"color":"currentColor","style":"solid","width":"1px"}},"spacing":{"padding":{"bottom":"var:preset|spacing|50"},"blockGap":"0"}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group" style="border-bottom-color:currentColor;border-bottom-style:solid;border-bottom-width:1px;padding-bottom:var(--wp--preset--spacing--50)"><!-- wp:heading {"level":1,"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--xx-large, clamp(2.5rem, 6vw, 4.5rem))"}}} -->
<h1 class="wp-block-heading" style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--xx-large, clamp(2.5rem, 6vw, 4.5rem))">Engagements</h1>
<!-- /wp:heading -->

<!-- wp:group {"style":{"spacing":{"padding":{"top":"var:preset|spacing|40"}}},"layout":{"type":"constrained","contentSize":"38rem","justifyContent":"left"}} -->
<div class="wp-block-group" style="padding-top:var(--wp--preset--spacing--40)"><!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"0"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.2vw, 1.1875rem))"}}} -->
<p style="margin-top:0;margin-bottom:0;font-size:var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.2vw, 1.1875rem))">Three ways to work with the studio, from a two-week diagnostic to a year on retainer, each with the same fixed dates and the same written brief.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:group --></div>
<!-- /wp:group --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
<!-- /wp:group -->
Back to Core Patterns

Continue exploring

Next in Page header

Explore all 6 Page header patterns

Page header meta rendered in Twenty Twenty-FiveShot in Twenty Twenty-FivePage headerNo 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 headerPreview pattern
Post header rendered in Twenty Twenty-FiveShot in Twenty Twenty-FivePage headerNo 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 headerPreview pattern
Page header cover strip rendered in Twenty Twenty-FiveShot in Twenty Twenty-FivePage headerNo 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 headerPreview pattern