Skip to main content

Container

The Container component is a layout component that can be used to create a responsive container for your content.

Import

import { Container } from '@vortexlabs/vortex';
import type { ContainerProps } from '@vortexlabs/vortex';

Display

<Container paddingInline={4}>{children}</Container>

Other links

Storybook
Container content
<Container
  paddingInline={4}
  maxWidth="100%"
>
  Container content
</Container>

Features

  • Centers content horizontally.
  • Supports responsive widths, maximum widths, and padding.
  • Renders different HTML elements with as.

Padding

Use padding to add space around the content. Values use theme spacing units. Container has no padding by default.

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

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

Responsive Padding

Pass a breakpoint object to change padding across screen sizes.

<Container width="100%" padding={{ xs: 6, sm: 8 }}>
  <Placeholder backgroundColor="surface" />
</Container>

Width

Set width with a CSS value or breakpoint object. Numeric values use theme width units.

<Container width="1024px">
  <Placeholder backgroundColor="surface" />
</Container>

<Container width={{ xs: "400px", sm: "600px" }}>
  <Placeholder backgroundColor="surface" />
</Container>

Container

Combine responsive width and padding for a page layout.

<Container width={{ xs: "100%", sm: "1280px" }} paddingInline={{ xs: 4, sm: 8 }}>
  <Placeholder backgroundColor="surface" />
</Container>

Max Width

Use maxWidth to limit the container's width. The default is "100%".

<Container width="100%" maxWidth="1024px">
  <Placeholder backgroundColor="surface" />
</Container>

Accessibility

Description
Use as to choose an HTML element that fits your content, such as main or section.
Pass accessibility attributes, such as aria-label, through attributes when needed.