Content header

A content header contains the core information of the current page content.

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:

content-header-usage-basic-elements
1. Page title, 2. Subline, 3. Breadcrumb / Back navigation, 4. Content actions

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.
  • 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-usage-minimal
Minimal content header with a title

Content header with subline

content-header-usage-with-subline
Content header with a title and a subline

Content header with breadcrumb

content-header-usage-with-breadcrumb
Content header with a title and a breadcrumb

Content header with back navigation

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

content-header-usage-with-back-nav
Content header with a title and a back navigation

Complete content header

content-header-usage-maximal
Content header with a title, breadcrumb, subline and content actions

Do’s & Don’ts

content-header-usage-dos-page-actions-1

content-header-usage-dos-page-actions-1

  • 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.

Style

This chapter shows several content header styles in the design system.

Overview

content-header-style-bradcrump
Content header with breadcrumb

content-header-style-back-nav
Content header with back navigation

Color

Please refer to the specific component pages for specific style details on each element.

Typography

The following table gives reference to the different font sizes and weights used in the component:

Name State Font-family Font-size Line-height Text-align
Page title   Siemens Sans Black 36px 43px left
Subline   Siemens Sans Roman 17px 25px left

Sizing and spacing

The following measurements show the dimensions for this component:

content-header-style-spacing-elements-1
Complete content header sizing

The content header is used as a block. No matter whether it has a subline or not, the bottom spacing stays the same either way.

Complete content header

content-header-style-spacing-elements-4
Complete content header

Without a subline

content-header-style-spacing-elements-3
Content header with breadcrumb and content actions

Without subline and breadcrumb or back navigation

content-header-style-spacing-elements-2
Content header with title and content actions

Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top