Container

Containers can be used to group content that is related. Additionally, they emphasize and highlight your grouped content.

OverviewPropertiesUsage

Variants

Containers come in four emphasis levels that help to establish a visual hierarchy.

Minimal

• Use the minimal variant to highlight information subtly or visually group chunks of related content in a bigger group of items—for example, a group of form fields in a form.

Default

• Use the default variant to highlight information that needs to stand out from surrounding content.
• Use the default variant for most Containers.

Emphasized

• Use the emphasized variant to highlight information nested in a default Container.

Accent

• Use the accent variant for important information that needs to draw maximum attention.
• Use accent Containers sparingly and avoid multiple instances in the same view. They can quickly overwhelm users and reduce the visual importance of other elements, such as accent Buttons.

Colors

Containers come in five colors. Each of them has a different semantic meaning.

Neutral

• Use the neutral color if you don't want to indicate positive or negative conditions or if the information is unessential for users to continue their task.

Primary

• Use the primary color to highlight information without conveying concern—for example, an informational message that users should be aware of.
• Use primary messages sparingly, once per page at most.

Success

• Use the success color to indicate positive conditions. For example, to inform about successful actions.
• Avoid over-using it to keep the emphasis on problematic conditions that require attention.

Warning

• Use the warning color to indicate an upcoming or potential negative condition—for example, if users should be aware of something that doesn't require immediate attention.

Critical

• Use the critical color to indicate a negative condition that requires immediate attention.