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

Color

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

Name State Property Color name
Title all Foreground color Gray 800
Description all Foreground color Gray 800
Expander all Foreground color Gray 800
Container all Border color Gray 250

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
Title all Siemens Sans Bold 14px 20px left
Description all Siemens Sans Regular 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