Anatomy
- Back navigation: Back link or breadcrumbs, depending on page hierarchy.
- Header: Indicates the current page title.
- Badge: (Optional) Short label supporting or qualifying the title (e.g., status).
- Description: (Optional) Brief sentence below the title that adds context of the page.
- Actions: (Optional) Primary page actions (buttons, button group, or a trigger for a dropdown).
Usage Guidelines
When to use this component
Use a Header at the top of any page to:
- Present the current page title and optional description.
- Provide back navigation on nested pages to aid orientation.
-
Surface the primary actions for the page.
When not to use this component
- As a header for an overlay surface like a Modal or Popover
-
In internal sections as subtitles
Best Practices
Use Header only at the top of the page.
Don't use Header in a modal dialog
Use Header to hold primary actions of the page.
Avoid overcrowding the Header with too many actions. If you need more actions or are designing for mobile, prioritize them. Place less important actions in a dropdown menu.
Don’t duplicate breadcrumbs and title if that causes repetition.
Don’t place more than one Header per page.
General Component Behaviors
Adaptability
The Header fits the full width of a page or container, located at the top of a page. Elements such as actions, titles, and secondary navigation remain in the same position if the component size changes.
Responsive Behavior
Mobile responsive
To accommodate smaller graphical windows, such as those on mobile devices, the header elements are wrapped and the actions are moved below the title and description.
Variants
Header basic
Header with description
Header with navigation
Header with overflowing actions
Content Guidelines
File upload is a component that leaves little room for text, as it is an interactive element of the interface. Therefore, all of its content must be short, concise, and clear for users. A user should be able to quickly see the component and know what to do next.
Headings
- Headings should be sentence case unless they include proper nouns.
- Headings should be short and concise to let people know what to expect on the page.
Description
- Used for secondary context.
- The description should be clear and related to the content of the page.
- It is recommended not to exceed 3 lines of text.
Link and Breadcrumbs
- They should be meaningful, expressing what our users can access after clicking them.
- Terminology used for actions must be consistent throughout the product.
Badge
- Labels should be clear and concise to take up as little space as possible.
- Ideally a maximum of 2 words can be used.
Actions
- They should be 3 words max and describe what can a user expect after clicking them.
- Terminology used for actions must be consistent throughout the product.
For further information, see the Content Styleguide.
Known Gaps
- Titles and descriptions have no limits and could be difficult to control their width and height to follow the guidelines