Container

Used to constrain a content's width to the current breakpoint, while keeping it fluid.

Panda

import { Container } from "styled-system/jsx";

Usage

The default maxWidth is 8xl which maps to 90rem (1440px).

Content in a Container

import { DecorativeBox } from '@/app/components/decorative-box'
import { Container } from 'styled-system/jsx'

export function BasicDemo() {
  return (
    <Container bgColor="page.surface.100">
      <DecorativeBox p="md">Content in a Container</DecorativeBox>
    </Container>
  )
}

Sizes

Use the maxWidth prop to change the size of the container.

This is some text within a container of size 1/4.

This is some text within a container of size 1/2.

This is some text within a container of size 3/4.

This is some text within a container of size full.

import { Container, VStack } from 'styled-system/jsx'
import { DecorativeBox } from '@/app/components/decorative-box'

function getText(size: string) {
  return `This is some text within a container of size ${size}.`
}

export function SizesDemo() {
  return (
    <VStack w="full">
      <Container maxW="1/4" px="2" w="full">
        <DecorativeBox px="md">{getText('1/4')}</DecorativeBox>
      </Container>

      <Container maxW="1/2" px="2" w="full">
        <DecorativeBox px="md">{getText('1/2')}</DecorativeBox>
      </Container>

      <Container maxW="3/4" px="2" w="full">
        <DecorativeBox px="md">{getText('3/4')}</DecorativeBox>
      </Container>

      <Container px="2" w="full">
        <DecorativeBox px="md">{getText('full')}</DecorativeBox>
      </Container>
    </VStack>
  )
}

Props

The Container component accepts any CSS properties.

On this page

Edit this page on Github