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