About the page header

Below the top-most navigation items we introduce a page header. The page header layout element takes on the role of the header for mobile-size viewports and it can sometimes be hidden on desktop-size viewports.

The page header can contain the following elements:

  • Page title (required)
  • App switcher (required unless back button is provided)
  • Back button
  • Primary action button

Resize your browser to see how the page header transforms between media queries. Buttons and the page title are automatically altered to look their best between all views. If you place a different component in the page header you’re responsible for changing it’s appearance between viewport sizes.