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-preview/layouts-core';
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.
Props
ContainerProps
Signature:
export declare type ContainerProps<E extends > = <E, >;ContainerOwnProps
, , , | Name | Type | Default | Description |
|---|---|---|---|
variant? | 'default' | The visual style of the container. | |
color? | 'neutral' | The color of the container. This should be chosen based on the context the container is used in. |
LayoutProps
, , , PaddingProps
| Name | Type | Default | Description |
|---|---|---|---|
padding? | 8 | ||
p? | - | ||
paddingX? | - | ||
px? | - | ||
paddingY? | - | ||
py? | - | ||
paddingTop? | - | ||
pt? | - | ||
paddingRight? | - | ||
pr? | - | ||
paddingBottom? | - | ||
pb? | - | ||
paddingLeft? | - | ||
pl? | - |
MarginProps
| Name | Type | Default | Description |
|---|---|---|---|
margin? | 0 | ||
m? | - | ||
marginX? | - | ||
mx? | - | ||
marginY? | - | ||
my? | - | ||
marginTop? | - | ||
mt? | - | ||
marginRight? | - | ||
mr? | - | ||
marginBottom? | - | ||
mb? | - | ||
marginLeft? | - | ||
ml? | - |
LayoutSizeCSS
Signature:
export declare type LayoutSizeCSS = <, | | | | | >;