Container

Usage

Import all parts and piece them together.

import { Container } from '@raystack/apsara/v1'
 
<Container size="small">Small container content</Container>
 
<Container size="medium">Medium container content</Container>
 
<Container size="large">
  Large container content
</Container>

Container Props

Prop	Type	Default
`size`	`"small" \| "medium" \| "large" \| "none"`	`"none"`
`align`	`"left" \| "center" \| "right"`	`"center"`
`className`	`string`	-
`ariaLabel`	`string`	-
`ariaLabelledby`	`string`	-

Examples

Size

Containers can have multiple size.

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

Align

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

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