Skip to main content

PageHeader

It is the top and main information of the page. It should have a title or something that tells where the user is at that moment and what actions can be taken. There are two types of PageHeader: section and flow.

Section​

It is suitable for common pages that are not part of flows.

Flow​

Contains steps for taking the journey through longer streams, such as editing or configuring. Steps should have as few items as possible, not exceeding the limit of 6 items.

Internal elements​

The main elements of a PageHeader are titles/navigation and main actions.

Titles​

They must occupy all available space on the screen. It is not recommended to apply icons with Tooltip beside the titles.

Supporting title​

It can be used to reinforce what context the page is in.

Back button​

Returns to the previous page. This button should not be used to navigate between steps in a flow.

Main actions​

They are located to the right of the PageHeader. A maximum of 3 buttons must be used: a primary, a secondary and a tertiary. If you need to use more actions, they must be grouped in a tertiary button, with a "three dots" icon.

Positioning​

All PageHeader must be positioned just below the Navbar, no spacing above or below the component.

Inside grid​

The section PageHeader must always fit the page grid.

The PageHeader of flows must occupy the width available on the screen.

Good habits​

It should be used to identify a section and provide the main actions of a given page or flow.

  • Every PageHeader must have a title that informs what is that moment of the journey and what can be done (main actions)
  • Every PageHeader must be at the top of the page, just below the navigation bar
  • No PageHeader can have its position fixed, that is, it must follow the person's screen scroll
  • The main title must reflect the corresponding Navbar item. For example: in Channel Analysis, the title should be Channel Analysis
  • Titles must be written with only the first letter of each term in capital letters. For example: Marketing Automation.
  • Do not use punctuation such as full stop, question mark or exclamation in titles

Feedback​