Skip to main content

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';

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