Container

A wrapper component that sets a max-width and centers content horizontally.

Usage

1import { Container } from '@raystack/apsara'

Container Props

Prop

Type

Examples

Size

Containers can have multiple size.

1<Container size="none">
2  <Text>
3    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
4    Lorem Ipsum has been the industry's standard dummy text ever since the
5    1500s, when an unknown printer took a galley of type and scrambled it to
6    make a type specimen book.
7  </Text>
8</Container>

Align

Containers can be aligned to the left, center, or right of their parent element.

1<Container size="small" align="left">
2  <Text>
3    Lorem Ipsum is simply dummy text of the printing and typesetting industry.
4    Lorem Ipsum has been the industry's standard dummy text ever since the
5    1500s, when an unknown printer took a galley of type and scrambled it to
6    make a type specimen book.
7  </Text>
8</Container>

Accessibility

The Container component is designed with accessibility in mind:

  • Uses role="region" to mark it as a landmark for screen readers
  • Supports labeling via aria-label or aria-labelledby
  • Helps organize content into meaningful sections