Container

Responsive content wrapper for alignment and padding within sections

Live code

Example

Copy code

Open Sandbox

Reset demo

Storybook

Open in Storybook

Usage

Container

Container centers your content horizontally and sets its max-width with horizontal paddings.


                                                
                                                <Container>Content</Container>

Fluid Container

If you need a full-width container, you can use the isFluid prop.


                                                
                                                <Container isFluid>Content</Container>

Sizes

If you need different sizes of the container, you can use the size prop.


                                                
                                                <Container size="small">Content</Container>

Text Alignment

You can set the text alignment of the container using the textAlignment prop.


                                                
                                                <Container textAlignment="center">Content</Container>
                                                <Container textAlignment="right">Content</Container>

You can define responsive values for the textAlignment prop using an object:


                                                
                                                <Container textAlignment={{ mobile: 'center', tablet: 'right', desktop: 'left' }}>Responsive text alignment</Container>

API

Name	Type	Default	Required	Description
isFluid	bool	false	✕	If true, Container is fluid
size	ContainerSizesType	xlarge	✕	Size variant
textAlignment	[Text Alignment dictionary \| Responsive<TextAlignmentDictionaryType>]	-	✕	Text alignment

On top of the API options, the components accept additional attributes. If you need more control over the styling of a component, you can use style props and escape hatches.

For detailed information see Container component