Skip to main content

​
Description

The Container component provides a centered, responsive layout container with predefined maximum widths and horizontal padding. It’s designed to constrain content width while maintaining responsive padding and alignment across different screen sizes.

​
Props

Container extends all standard HTML div attributes and accepts the following props:
​
size
'small' | 'medium' | 'large' | 'none'
default:"none"
Controls the maximum width of the container
  • small - Max-width: 430px (100% on mobile < 480px)
  • medium - Max-width: 715px (100% on mobile < 768px)
  • large - Max-width: 1145px (100% on mobile < 1200px)
  • none - No max-width constraint (default)
​
align
'left' | 'center' | 'right'
default:"center"
Controls horizontal alignment of the container
  • left - Aligns container to the left (margin-left: 0, margin-right: auto)
  • center - Centers the container (margin-left: auto, margin-right: auto) (default)
  • right - Aligns container to the right (margin-left: auto, margin-right: 0)
​
children
React.ReactNode
The content to be rendered inside the Container
​
className
string
Additional CSS class names to apply to the Container
​
role
string
default:"region"
ARIA role attribute for accessibility (defaults to “region”)
​
aria-label
string
Accessibility label for the container region
​
aria-labelledby
string
ID of the element that labels this container
​
...props
HTMLAttributes<HTMLElement>
All standard HTML div attributes are supported including:
  • id - Element ID
  • data-* - Data attributes
  • Event handlers (onClick, onMouseEnter, etc.)

​
Usage examples

​
Basic usage

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

function Example() {
  return <Container>Content</Container>;
}

​
Small container

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

function Example() {
  return (
    <Container size="small">
      This content is constrained to 430px width
    </Container>
  );
}

​
Medium container

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

function Example() {
  return (
    <Container size="medium">
      This content is constrained to 715px width
    </Container>
  );
}

​
Large container

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

function Example() {
  return (
    <Container size="large">
      This content is constrained to 1145px width
    </Container>
  );
}

​
Left-aligned container

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

function Example() {
  return (
    <Container size="medium" align="left">
      Left-aligned content
    </Container>
  );
}

​
Right-aligned container

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

function Example() {
  return (
    <Container size="medium" align="right">
      Right-aligned content
    </Container>
  );
}

​
With accessibility attributes

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

function Example() {
  return (
    <Container 
      size="large"
      aria-label="Main container"
      role="main"
    >
      Main content area
    </Container>
  );
}

​
With labelledby reference

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

function Example() {
  return (
    <>
      <h1 id="heading">Page Title</h1>
      <Container aria-labelledby="heading">
        Content related to the page title
      </Container>
    </>
  );
}

​
With custom styling

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

function Example() {
  return (
    <Container 
      size="medium" 
      className="custom-container"
      id="main-container"
    >
      Content with custom styling
    </Container>
  );
}

​
Styling notes

The Container component includes responsive padding and width constraints:

​
Base styles

  • box-sizing: border-box - Consistent box model
  • flex-shrink: 0 - Prevents container from shrinking
  • width: 100% - Full width by default

​
Responsive padding

  • Default (< 640px): padding-left and padding-right use --rs-space-3
  • ≥ 640px: padding-left and padding-right use --rs-space-5

​
Size variants (max-width)

  • size="small": 430px (100% below 480px)
  • size="medium": 715px (100% below 768px)
  • size="large": 1145px (100% below 1200px)
  • size="none": No max-width constraint

​
Alignment variants

  • align="left": margin-left: 0; margin-right: auto;
  • align="center": margin-left: auto; margin-right: auto;
  • align="right": margin-left: auto; margin-right: 0;

​
Related components

  • Box - For basic container needs
  • Flex - For flexbox layouts
  • Grid - For grid-based layouts