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:
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 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.
Container group
Use a container group to visually group several containers.
Nested containers
Use nested containers to reduce the complexity of the content. Each nested container behaves like a regular container.
Behavior
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.
Style
This chapter shows several container styles in the design system.
Overview
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: