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
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
.
Change the Container color
By default, the container has the color neutral
. You should always consider
the meaning behind the colors when changing this.
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.
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.