Skip to main content

Content header

Content headers provide a brief overview of the content on a page. 

Content header - Usage

The content header helps users understand what the page is about. We typically use it at the very top of the page to show a clear page hierarchy.

Content header overview

  1. Back button
  2. Header title
  3. Header subtitle
  4. Header slot
  5. Action buttons

Variants​

Our content header variants makes it easier to achieve a well-balanced visual hierarchy throughout the page.

  • Primary: In our applications, we most often use the primary variant for main pages or primary sections.
  • Secondary: We typically use this variant when we want to provide context or actions for a specific section of a page, such as when displaying detailed information related to a selected item from a list.

Content header variants

Options​

  • Back button: Enable if you want to provide a way for the user to navigate back.
  • Header title: Set your page title here. Use a clear, short and descriptive wording.
  • Header subtitle: Provide additional info for your content such as a descriptive sentence when required.
  • Header slot: Use this slot to add additional content that is relevant to the page. We typically use it to display an object's status or a counter displaying the number of children by using a pill.
  • Action buttons: Offer convenient shortcuts for actions that the user might need to perform frequently, for example "Add" or "Edit".

Behavior​

  • Interaction: The back button navigates usually one step back or behaves the same as the browser back. Action buttons typically navigate to another view.
  • Alignment:
    • Place the content header at the very top left corner related to the content position.
    • Back button, title and subtitle are automatically aligned on the left side while the action buttons are aligned on the right side.
    • Elements in the header slot are top aligned by default. Use top margin to center align it with the title.
  • Cluster action buttons: Action buttons are automatically aligned to the right. An example for the primary content header has the back button, title and subtitle at the left top corner of the whole page, and the action buttons at the right top corner of the page.

Dos and Don’ts​

  • Do use to provide quick access to common tasks for the whole content area
  • Do place only items in the header slot that don’t take up too much space, such as a status or a counter
  • Don’t use a secondary content header as a page title
  • Don’t use more than one primary headline in one page