Skip to main content

    Container

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

    Import

    import { Container } from '@dynatrace/strato-components/layouts';

    Use cases

    CodeSandbox

    Change the Container variant

    Use the variant prop to create the different contextual container variants. When no variant is specified, it is set to default.

    CodeSandbox

    Change the Container color

    By default, the container has the color neutral. You should always consider the meaning behind the colors when changing this.

    CodeSandbox

    Polymorph the Container component

    By default, the container component is rendered as a standard div element. For layouting purposes, the component can be polymorphed to any other component. This can be used, for example, to create a Flex layout inside a container component.

    CodeSandbox

    Add layout styles to the Container component

    The container component has a default padding of 16px. This can be changed by setting any padding prop on the container. Similarly, the container also accepts any CSS margin and layout props, such as width or height.

    CodeSandbox
    Still have questions?
    Find answers in the Dynatrace Community