'Page header' component
- Sergiy Nalyvayko (Unlicensed)
Component type | Molecule |
|---|---|
Component possible inclusions | n/a |
Design source (in Figma) | |
Component status |
Introduction
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.
Anatomy
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.
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.
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.
Behavior
Page headers are not interactive, as such the only behaviour is the responsive definition of content stacking.
Usage
Do’s
Use Page Header when you create a page
Specific types of page headers (e.g. product page header, article header) can be used for those content types.
Don’ts
Don’t use Page Header for Home page.
Analytics & Data
There are no specific requirements for analytics & data.
Related/Similar Components
Teaser/Promo
Heading block