DocsBlog

  • 1.0.0

  • light

    dark

    system

    Switch mode

  • Cerberus

    Acheron

    Elysium

Get Started
Components
Data Grid
Styling
Theming

Concepts

OverviewCompositionCerberus ContextTesting

Layout

Aspect RatioBleedBoxCenterContainerDividerFlexFloatGridGroupNewLink OverlayScrollableStackWrap

Components

AccordionAdmonitionAvatarButtonCarouselCheckboxClipboardCollapsibleComboboxConfirm ModalCTAModalDate PickerDialogFieldFieldsetFile UploaderIcon ButtonInputLoading StatesMenuNotificationsNumber InputPaginationNewPin InputProgressPrompt ModalRadioRatingSelectSplit ButtonSwitchTableTabsTagTextTextareaToggleTooltip

Utilities

Client OnlyDownload TriggerEnvironmentFeature FlagsFocus TrapForFormat ByteFormat NumberFormat Relative TimeFrameHighlightJSON Tree ViewLocaleLocal StoragePortalPresenceShowsplitPropsTheme

On this page

  • Edit this page on Github
Cerberus Design System | Docs

Container

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

  • Panda

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.

import { Container } from "styled-system/jsx";
Content in a Container
Copy
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>
  )
}
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.
Copy
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>
  )
}