[Library] Header

Catalogue accessStandard

Nav stack

A header built as a masthead rather than an app bar: a micro-row of tracked uppercase meta (address, hours, telephone) sits over a hairline, and under it the main row carries the wordmark, four links and one filled action over a 3px rule. Two stacked rows, two rules of different weight, both held to the same measure, so the top of the page reads as printed matter. 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

A page header set as a masthead: a micro-row of meta over a hairline, and under it the main row of wordmark, links and one action over a heavy rule. It is the first thing on a page and it does one job, which is to name the site and give the four ways out of it.

The signature moment

The double rule

The signature is the two rules of different weight, stacked. A hairline under the meta row and a 3px rule under the main row, both held to the same 1240px measure rather than bled to the viewport, is the oldest device in printed matter: it says nameplate before a single word is read. Nothing else in the section is trying to be clever. The wordmark is set in caps with open tracking against the meta row's tiny tracked caps, and the two rules do the rest.

That is also what separates it from nav-bar, which puts everything on one line and gets its signature from the collision of a heavy wordmark against tiny links. This one is deliberately two rows: the meta a masthead can carry (address, hours, telephone) has nowhere to live on a single line.

What it inherits from your theme

  • The typeface. The pattern states no font family anywhere. The masthead is set in your face, serif or sans.
  • Your colours. The ground asks for base and the type asks for contrast, the two slugs every stock block theme defines. If a theme defines neither, the header falls back to white and black and still works.
  • Both rules. They are currentColor, not a colour of ours, so they cannot blank and they follow your text colour wherever your theme puts it.
  • Your spacing scale. The row padding is stated as spacing presets, so a theme with a generous scale gets a taller masthead without you editing anything.
  • The link and button behaviour. The five actions are core buttons carrying your theme's element styles, so hover and focus are yours.

What it decides for itself

  • Full bleed, own measure. The ground spans the viewport; the content and both rules are held to 1240px, so the rules line up with the page's content rather than running off the edge.
  • The meta row's scale. 15px minimum, uppercase, tracked at 0.14em. It reads as fine print because of the tracking, not because it is small: anything a visitor actually reads stays at or above the 15px floor.
  • The wordmark's ramp. A clamp() from 24px to 36px, weight 700, caps, and tracked open at 0.06em, which is the nameplate move rather than the logotype move.
  • The action's colours. The four links are transparent buttons in the same colour as the text; the fifth inverts to the contrast ground with base type, so the one thing worth clicking is the one thing with a filled box round it. The two chains are each other's opposites, so it cannot vanish in any theme.

What to change first

  1. The wordmark. Replace "Hallmere" with your name. It is a heading, so it is also what a screen reader announces first.
  2. The meta row. Address, hours and telephone are the three a studio uses. Any three short facts work: a location, a status line, a number. Delete one and the row still reads.
  3. The link labels and their URLs. All five buttons ship without a link. Set them, and keep the labels to one word each: the row's rhythm is built on it.
  4. The rule weights. The hairline is 1px and the heavy rule 3px, both on the groups rather than as separators. Take the heavy one to 4px or 6px if your theme's face is heavy enough to carry it.
  5. The height. The row padding is spacing presets 30 and 40. Step both down one rung if the masthead feels tall against your hero.
At 390148 words

The links are not a menu button, because a pattern cannot ship JavaScript and a CSS-only toggle would be a <style> this catalogue refuses. So the header wraps instead, and it is authored to wrap well:

  • The meta row's three items break onto their own lines, still left aligned under each other, and the hairline stays under all of them.
  • The main row breaks between the wordmark and the links. The four links fit one line at 390 at their natural size, and the filled action drops to a line of its own under them.
  • Every link is a button with 0.75rem of vertical padding, so each one is a ~48px tap target rather than a 16px word.

If you would rather it did not grow on a phone, cut the meta row to one item and the links to three; the composition survives both.

Notes81 words
  • Core blocks only: group, paragraph, heading, buttons, button. No plugin.
  • Every colour is a fallback chain ending on a colour WordPress itself guarantees, so nothing in the header can resolve to nothing.
  • The rules are per-side group borders rather than core/separator, which Twenty Twenty-Four narrows to a centred stub unless it is is-style-wide.
  • No typography on any button: at the 6.6 floor a button carrying typography serialises to the outer div and the editor marks it invalid.
Back to the library

Continue exploring

Next in Header

Explore all 3 Header patterns