Container

Layout component that can be used to create a responsive container for your content.

Import

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

Display

<Container>{children}</Container>

Allied components

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 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.

Show Code

Container supports responsive padding using breakpoint objects.

Show Code

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

Show Code

The container uses specific breakpoints optimized for the design system.

Show Code

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

Show Code

Accessibility

Container component provides semantic HTML structure and supports accessibility attributes.

Key	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.