Content header

Usage

When to use

Use a content header in the following cases:

• To introduce the user to the current page.
• To show the page title.
• To provide core description of the page.

General construction

The content header consists of the following elements:

1. Page title

• Most pages should have a page title. Starting pages or dashboards can be an exception.
• The page title is short and descriptive. It reflects the content in just a few words.
• The page title is located between the breadcrumb or back navigation and the subline.

2. Subline

• The subline is optional.
• The subline is located below the page title.
• The subline is a secondary headline that elaborates the page title or contains meta information.

3. Breadcrumb / Back navigation

• Breadcrumb is used for orientation.
• Breadcrumb and back navigation are located above the page title.
• Use back navigation for low hierarchy websites and breadcrumbs for greater depth.

4. Content actions

• Content actions are related to the entire page. They are located in the top right corner of the content header.
• For more than four actions use a drop-down menu. Show the main actions on the page and place the additional actions in the menu.

Types

There are the following content header types:

Minimal content header

Most pages need introduction and therefore should have a title.

Content header with subline

Content header with breadcrumb

Content header with back navigation

Breadcrumb or back navigation are only visible when backwards navigation is possible.

Complete content header

Do’s & Don’ts

• Show the most relevant content actions and use a drop-down menu to pool the others.
• Don’t show more than four page actions in the content header.