Container

Content

<Container
  paddingInline={4}
  paddingBlock={0}
  maxWidth="100%"
/>

Features

Responsive Design for different screen sizes.
Customizable padding and width.
Flexible as prop to render as different HTML elements.
Supports custom attributes for accessibility.

Padding

Padding can be used to create a responsive container for your content. By default, the padding is set to 4, which applies only to the inline padding.

<Container width="100%" padding={4}>
  <Placeholder width="100%" />
</Container>

<Container width="100%">
  <Placeholder width="100%" />
</Container>

Responsive Padding

Container supports responsive padding using breakpoint objects.

<Container padding={{ xs: 6, sm: 8 }}>
  <Placeholder borderColor='default' />
</Container>

Width

The width of the container can be set to a specific value or to a responsive value.

<Container width="1024px">
  <Placeholder borderColor='default' />
</Container>

<Container width={{ xs: '400px', sm: '600px' }}>
  <Placeholder borderColor='default' />
</Container>

The container uses specific breakpoints optimized for the design system.

<Container width={{ xs: '1264px', sm: '1280px' }} padding={{ xs: 6, sm: 8 }}>
  <Placeholder borderColor='default' />
</Container>

Max Width

The maxWidth property allows you to set a maximum width for the container, preventing it from growing beyond a certain size.

<Container maxWidth="1024px">
  <Placeholder borderColor='default' />
</Container>

Accessibility

Container component provides semantic HTML structure and supports accessibility attributes.

Description

If as prop is omitted, it defaults to div.

Use semantic HTML elements with the as prop for better accessibility (e.g., as="main", as="section").

Container supports custom attributes for additional accessibility features.