Page Header
- Usage
- Showcase
The page header component provides users with the context of the page. It is always placed just below the site header.
Anatomy
| Components | Mandatory | Optional |
|---|---|---|
| Page title | yes | no |
| Meta (content type, published date, modified date, reading time) | no | yes |
| Download - Bookmark actions | no | yes |
| Breadcrumb The Breadcrumb component provides information on the page and its relationship to the site's hierarchy and structure. It is optional if your website's navigational structure has less than 3 levels. | no | yes |
| Image copyrights | yes | no |
Do's
- ensure the pages contain all the components and elements in the anatomy table above
- always use a page header when building your internal pages
- when choosing a background image, make sure it highlights the main object related to the content and is meaningful
- choose image copyright text colors accordingly, use light font color on darker images and darker font color on lighter ones
Don'ts
- don't use more than one-page header per page
- do not use a background image unless there is a communication need, as it might be a distraction
When to use
- to highlight the topic of the page, or to show important information about the page
When not to use
- the page header is not used for the homepage of the website