Content header

Guidelines

Guidelines

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

1. Back button
2. Content title
3. Content subtitle
4. 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.

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.
• 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.
• 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
• Don't use a secondary content header as a page title
• Don't use more than one primary headline in one page

Related patterns

• Application header
• Content
• Button

Development

Development

Examples

Basic

PreviewAngularReactVueJavaScript

No back button

PreviewAngularReactVueJavaScript

API

Properties

Name

Description and specifications

hasBackButton

Display a back button

Attribute:

has-back-button

Type:

boolean

Default:

false

headerSubtitle

Subtitle of Header

Attribute:

header-subtitle

Type:

string ｜ undefined

Default:

undefined

headerTitle

Title of Header

Attribute:

header-title

Type:

string ｜ undefined

variant

Variant of content header

Attribute:

variant

Type:

"primary" ｜ "secondary"

Default:

'primary'

Events

Name

Description and specifications

backButtonClick

Triggered when back button is clicked

Detail:

void