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

Sizes

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

Props

The Container component accepts any CSS properties.

On this page

Edit this page on Github

Cerberus Design System | Docs

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

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