Container

A container divides content into meaningful sections.

Usage

When to use

Use a container in the following cases:

  • To group content.
  • To display multiple subjects and functions on a screen.
  • To create a scannable UI.

General construction

A container consists of the following elements:

container-usage-general-construction
1. Container, 2. Descriptive title, 3. Description, 4. Expander, 5. Content actions, 6. Additional title content

1. Container

  • The container is the area that can hold any kind of content.

2. Descriptive title

  • The container can have a title.
  • The descriptive title is optional.

3. Description

  • The description gives context information about the content.
  • The description is optional.

4. Expander

  • The container can have an optional expander.

5. Content actions

  • The container can have optional content actions. For example, buttons for ‘edit’, ‘delete’ or a switch to activate/deactivate the content.

6. Additional title content

  • There can be additional information, for example, a badge or an indicator for unsaved changes.

Options

The following container options are available:

Simple container

Use a simple container to structure and group content.

container-usage-options-simple-container
Simple container

Container with title

Use a container with title to group content into visual and logical chunks.

container-usage-options-title
Container with title

Container with expander

Use a container with expander to enable the user to show or hide a container’s content. All containers with expandable function require a title. Both expander and title trigger the expand/collapse function.

We recommend to initially expand the container. If there is more than one expandable container in a single view, only the first should be initially expanded.

container-usage-options-expandable
Container with expander

Container with dividers

Use a container with dividers to separate the container into sections and to separate related content groups.

container-usage-options-divider
1. Section divider, 2. Content divider

Container with actions

Use a container with actions to manipulate the content of the container. A maximum of three actions are visible at the same time. If more actions are needed, a more menu can be used instead of listing all actions.

container-usage-options-actions
Container with actions

Container with additional title content

Use a container with additional title content to show more information about the title or content, for example, a badge or an indicator for unsaved changes.

container-usage-options-additional-content
Container with badge

Container with frameless content area

Use a container with frameless content area to display for example, lists and tables.

container-usage-options-frameless
Container with frameless content area and list items

Container group

Use a container group to visually group several containers.

container-usage-options-grouping
Container group with expander

Nested containers

Use nested containers to reduce the complexity of the content. Each nested container behaves like a regular container.

container-usage-options-nested
Nested containers

Behavior

Container in sidebar

The container fills out the whole width of the sidebar. Its content though has an outer spacing.

container-usage-options-sidebar
Container in sidebar

Do’s & Don’ts

container-usage-do-dont

  • Use only one level of nested containers at most.
  • Do not nest more than one level of containers.

Style

This chapter shows several container styles in the design system.

Overview

container-style-overview-noncollapsible
Container with title and description

container-style-overview-content-actions
Container with expander and content actions

container-style-overview-group
Container with expander, badge and more menu

container-style-overview-nested
Nested containers with expander

container-style-example1
Key value pairs in simple container and list in container with frameless content area

container-style-example2
Container in sidebar

Typography

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

Name State Font-family Font-size Line-height Text-align
Title all Siemens Sans Bold 14px 20px left
Description all Siemens Sans Roman 14px 20px left

Sizing and spacing

The following measurements show the dimensions for this component:

container-style-sizing-general
Sizing and spacing for container

container-style-sizing-simple
Spacing for simple container

container-style-sizing-divider-actions
Spacing for several containers and options

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