Container

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:

'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)

'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)

React.ReactNode

The content to be rendered inside the Container

string

Additional CSS class names to apply to the Container

string

default:"region"

ARIA role attribute for accessibility (defaults to “region”)

string

Accessibility label for the container region

string

ID of the element that labels this container

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;

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

Get Started

Guides

Layout Components

Navigation Components

Data Display

Form Components

Feedback Components

Overlay Components

Utility Components

Description

Props

Usage examples

Basic usage

Small container

Medium container

Large container

Left-aligned container

Right-aligned container

With accessibility attributes

With labelledby reference

With custom styling

Styling notes

Base styles

Responsive padding

Size variants (max-width)

Alignment variants

​Description

​Props

​Usage examples

​Basic usage

​Small container

​Medium container

​Large container

​Left-aligned container

​Right-aligned container

​With accessibility attributes

​With labelledby reference

​With custom styling

​Styling notes

​Base styles

​Responsive padding

​Size variants (max-width)

​Alignment variants

​Related components

Description

Props

Usage examples

Basic usage

Small container

Medium container

Large container

Left-aligned container

Right-aligned container

With accessibility attributes

With labelledby reference

With custom styling

Styling notes

Base styles

Responsive padding

Size variants (max-width)

Alignment variants

Related components