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

Import​

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

Demo​

Change variant​

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

Change color​

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

Polymorph 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.

Add layout styles​

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.

Still have questions?
Find answers in the Dynatrace Community