Skip to main content

Container

Use the Container to group related content and establish visual hierarchy through different levels of emphasis and semantic color.

OverviewPropertiesUsage

When to use​

  • To group related content and establish visual hierarchy through different levels of emphasis.
  • To draw attention to important information using emphasis level and semantic color.

When not to use​

  • When you need to overlay or float content above other page elements. Use Surface instead.

Variants​

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

Examples of Container components with different variant property values.

Examples of Container components with different variant property values.

Default​

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

Minimal​

  • Use the minimal variant to subtly highlight information or visually group related content into a bigger group of items, such as a group of form fields in a form.

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 has a different semantic meaning.

Examples of Container components with different color property values.

Examples of Container components with different color property values.

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, such as an informational message that users should be aware of.
  • Use primary containers sparingly, once per page at most.

Success​

  • Use the success color to indicate positive conditions, such as informing about a successful action.
  • 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, such as when 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.
Tip

Learn more about the semantic meaning of colors in Status and health.

Still have questions?
Find answers in the Dynatrace Community