Container

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

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.