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 / Context, 4. Secondary content actions

1. Page title

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

2. Subline

  • The subline is a secondary headline that elaborates the page title or contains meta information.
  • The subline is located below the page title.
  • The subline is optional.
  • Breadcrumb, back navigation or context are located above the page title.
  • Use back navigation for low hierarchy websites and breadcrumbs for greater depth.

4. Secondary content actions

  • Secondary 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 more menu. Show the main actions on the page and place the additional actions in the menu.

Options

The following content header options are available:

Minimal content header

Most pages need introduction and therefore should have a page title.

content-header-usage-minimal
Minimal content header with page title

Content header with subline

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

Content header with breadcrumb

A breadcrumb is only visible when backwards navigation is possible.

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

Content header with back navigation

A back navigation is only visible when backwards navigation is possible.

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

Content header with context

A context can be the parent of the page.

content-header-usage-with-parent
Content header with page title and context

Complete content header

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

Behavior

Placement

The content header is placed in the main region at the top of the page.

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 more 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-overview-title
Content header with page title and subline

content-header-style-overview-breadcrumb
Content header with breadcrumb

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

content-header-style-overview-context
Content header with key-value-pair as context

Color

The following table gives reference to the different colors and shades:

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

Name State Property Color name
Page title all Foreground color Gray 800
Subline all Foreground color Gray 400
Context all Foreground color Gray 800

Typography

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

Name State Font-family Font-size Line-height Text-align
Page title all Siemens Sans Black 36px 43px left
Subline all Siemens Sans Regular 17px 25px left
Context all Siemens Sans Regular 14px 20px left

Sizing and spacing

The following measurements show the dimensions for this component:

The bottom spacing is at least 16px. Depending on the following content, it can be increased in steps of 8px.

content-header-style-spacing-back
Spacing for content header with back button

content-header-style-sizing-back
Sizing for back button

content-header-style-spacing-breadcrumb
Spacing for content header with breadcrumb and secondary content action

content-header-style-spacing-context
Spacing for content header with context and secondary content actions

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