Skip to main content

Container

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

    OverviewPropertiesUsageChangelog

    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.

    Four Container variants: Minimal with only a border, Default and Emphasized with progressively stronger grey fills, and Accent with a solid fill.

    Four Container variants: Minimal with only a border, Default and Emphasized with progressively stronger grey fills, and Accent with a solid fill.

    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.

    Five Container colors — Neutral, Primary, Success, Warning, and Critical — each shown with a matching background and text.

    Five Container colors — Neutral, Primary, Success, Warning, and Critical — each shown with a matching background and text.

    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