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.
A container consists of the following elements:
- 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.
- The description gives context information about the content.
- The description is optional.
- 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.
The following container options are available:
Use a simple container to structure and group content.
Container with title
Use a container with title to group content into visual and logical chunks.
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 with dividers
Use a container with dividers to separate the container into sections and to separate related content groups.
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 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 with frameless content area
Use a container with frameless content area to display for example, lists and tables.
Use a container group to visually group several containers.
Use nested containers to reduce the complexity of the content. Each nested container behaves like a regular container.
Container in sidebar
The container fills out the whole width of the sidebar. Its content though has an outer spacing.
Do’s & Don’ts
- Use only one level of nested containers at most.
- Do not nest more than one level of containers.
This chapter shows several container styles in the design system.
The following table gives reference to the different colors and shades:
|Title||all||Foreground color||Gray 800|
|Description||all||Foreground color||Gray 800|
|Expander||all||Foreground color||Gray 800|
|Container||all||Border color||Gray 250|
The following table gives reference to the different font sizes and weights:
|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: