Page header
The Page header component is a persistent UI element located at the top of pages in ADEO's internal products, which helps to maintain consistency throughout the user's journey. It offers contextual information, feature-level navigation, and access to features like Help, Notifications, and Context selection.
Structure
To cover a maximum of needs while preserving consistency and ease of use, the Page header component offers multiple configurations through a range of settable elements.
| Element | Purpose | Notes | Mandatory / optional |
|---|---|---|---|
| Page title | Provide a concise and precise description of the page content to help users quickly understand the topic or function of the page. | The title must match the selected sidebar item at the start. Then on the following pages, it should change to reflect the content. | Mandatory |
| Subtitle | Complement the title with additional information to enhance the understanding of the content. | Optional | |
| Status | Indicates the status of the page object. | Optional | |
| Tabs | Feature-level navigation. | Optional | |
| Back button | Allows users to return to the previous page or cancel an ongoing task. | Can't be combined with the Breadcrumb. | Optional |
| Breadcrumbs | Allows users to return to one of the previous pages and find out where they are in their journey. | Can't be conbined with the back button. | Optional |
| Key features section | Display a quick access to the help page and the notifications, and allows users the change a context option. | Context option can be handle as well from a Select, a Dropdown or an Autocomplete. | Optional |
| Shadow | Allows to increase the contrast between the Page header and the page content. | Can also appears on scroll if the header is sticky | Optional |
Variations
Page title
| Size | Value | Usage |
|---|---|---|
| Small | size.font.07 | Mainly used on subpages when users have started a process. This title variation is often combined with the back button. |
| Medium (default) | size.font.08 | Used on homepages and at the start of processes and user journeys. |
| Large | size.font.09 | Specific uses like landing pages |
Behaviours
Responsive
The Page header is a flexible element that fills the container's width. It must start on the left-hand edge or next to the Sidebar component.
Please note that the margins of the Page header depend on the container's width.
Breakpoints
For the moment, the Page header component has been designed for desktop devices, from breakpoints L to XXL.
Content
As a component with a cross-functional purpose independent of page content, none of its elements can be disabled. If a feature is not available, it must not be displayed.
Restrictions
The height of the Page header only depends on its configuration and can't be custom-tailored or modified.
Layout
The Page header is always displayed above the page content and can be optionally fixed or not while scrolling. In the second case, it can appear when users scroll back to the top of the page.