Brief: Page Header v. 0.1 [Component]

Component type	Page Header (general pages)
Document status	Frozen
Design source (in Figma)	Page Header block
Author	nathan.mckean@reckitt.com
Responsible

Page headers hold the key introductory and visual content of the page. Every page has a page header, though in rare cases (such as the home page) the page header is visually hidden.

Use When

You create any page
Specific types of page headers (e.g. product page header, article header) can be used for those content types.

Related/Similar Components

Though stylistically a page header can look visually similar to a teaser (particularly the Home Page Hero teaser), they are very different things. A page header frames and introduces the page content, teasers promote content that is held elsewhere and aim to link to it.
Whilst the most basic page header is just a heading or heading block, page headers will always deliver the heading as an <h1> whilst heading blocks can be used for other heading levels.

Key Content

Item	Type	Notes
Breadcrumb	Breadcrumb	Automated from site structure
Heading*	Text or Reference	Headings will likely be populated through the page content type which would either be use specified for a general page type, or for article and product page headers would likely pull from the article title and product name in the content model.
Subheading	Text or Reference
Image	Image or Reference	Similar to headings and descriptions, some imagery may be populated by the related content type (e.g. product/ article) but a ‘page hero image’ could be used for general pages.

*In future, content and headers may expand to include such things as authors, publication dates and more.

Visual Style

The general page header includes the following visual styles for MVP:

Visually-hidden: Generally used only on the home page. Many brands don’t want to page heading to visually precede the content (e.g. home page hero) and so it is visually hidden for this template.
With image: A general page header with supporting visual image. The image does not utilise the figcaption capability of the standard image component.
Without image: A simplified text only color-band.

Note: The simplest version would be basic text on the same colour background as the page default (e.g. white) and would not require the padding and depth of the color band. This version will likely need to come, but we can in theory avoid it for MVP if it is extra complexity.

Behavior

Page headers are not interactive, as such the only behaviour is the responsive definition of content stacking.

Editorial

Each heading used in a page header must be unique across the website it represents.
The heading should accurately describe the topic of the page, using common keywords for clarity and SEO improvement.
Write your heading to entice the user and be clear on what they can expect from the page before they have read it.
Subheadings can support shorter headings to provide additional context that isn’t SEO critical.
The page heading is not the same as the page title or the page ‘navigation name’. Though they can be similar (or identical) over-rides exist to allow page titles to be customised to external sources such as search engines and social shares and navigation names to be shortened to fit tight navigation menus.
Ensure that if an image is used, it is visually enticing and directly related to the page content. Avoid peripheral or tangentially related imagery.

Accessibility

Page headers house the <h1>. This should be the only <h1> on the page and all pages require an H1. Hence a page header is mandatory on all pages.
It is worth considering the semantics of wrapping the page header in <header> mark up. This is not to be confused with the <header> landmark (like the <footer> landmark of the page itself. The <header> element defines a banner landmark when its context is the <body> element. The HTML header element is not considered a banner landmark when it is descendant of an <article>, <aside>, <main>, <nav>, or <section> element.
Controls may be needed to define whether the image has content value or is purely decorative. If decorative, its alt attribute will be blank (=””) otherwise it will draw from the image's description.
The breadcrumb is a <nav> item and will be defined individually within the breadcrumb specification.
Semantically, headings are the start of content sections and so the imagery used within the page header should come after the heading in the DOM order, irrespective of how it is visually presented with CSS.

Analytics & Data

There are no specific requirements for analytics & data.

Future Expansion

In future, we may expand page headers to support additional functions such as CTA Blocks or even forms.
In future, headings may become dynamic and adjust from a default based on inbound sources (e.g. search keywords, campaigns, etc).

Wider Conversations that may impact this

Heading control: Whilst heading control for heading level automatic is a considerable subject, this is one area where we may be able to relax as we know that any heading in the page header will be an H1.
Image Performance & Lading: In all cases except where the page header is visually hidden, where imagery is used, it will be visible in the opening viewport. It is therefore likely that any imagery in a page header should be eagerly loaded. The wider discussion though needs to be about what our decision criteria and methodology for lazy loading of imagery is.

Inspiration from elsewhere

Page Header - Scottish Government Design System

Examples

The simplest page header on Air Wick is a heading a subheading/description.

Dettol’s page header includes subnavigation (which is not supported in the Reckitt Design System MVP and is better suited to sit above the page header as it is not ‘page-specific’ content.