Box

The most abstract styling component in Cerberus on top of which all other Cerberus components are built.

Panda

import { Box } from 'styled-system/jsx'

Usage

The Box pattern does not contain any additional styles. With its function form it's the equivalent of the css function. It can be useful with its JSX form and is the equivalent of a styled.div component, serving mostly to get style props available in JSX.

Shorthand

Use shorthand like bgColor instead of backgroundColor, m instead of margin, etc.

Pseudo Props

Use pseudo props like _hover to apply styles on hover, _focus to apply styles on focus, etc.

Border

Use the border and borderColor prop to apply border styles.

Shadow

Use the boxShadow or shadow prop to apply shadow styles.

Props

The Box component supports all CSS properties as props, making it easy to style elements.

On this page

Edit this page on Github

Cerberus Design System | Docs

This is the Box

import { Box } from 'styled-system/jsx'

export function BasicDemo() {
  return (
    <Box bgColor="page.bg.100" color="white" padding="4" width="3/4">
      This is the Box
    </Box>
  )
}

This is the Box with shadow

import { Box } from 'styled-system/jsx'

export function ShadowDemo() {
  return (
    <Box
      bgColor="page.surface.100"
      color="page.text.100"
      p="4"
      rounded="md"
      shadow="md"
    >
      This is the Box with shadow
    </Box>
  )
}

Box with a border

import { Box } from 'styled-system/jsx'

export function BorderDemo() {
  return (
    <Box
      border="1px solid"
      borderColor="page.border.initial"
      color="page.text.100"
      p="4"
    >
      Box with a border
    </Box>
  )
}

A Box is not a Button

import { Box } from 'styled-system/jsx'

export function PsuedoDemo() {
  return (
    <Box bg="tomato" w="100%" p="4" color="white" _hover={{ bg: 'green' }}>
      A Box is not a Button
    </Box>
  )
}

This is the Box

import { Box } from 'styled-system/jsx'

export function ShorthandDemo() {
  return (
    <Box bgColor="page.bg.100" color="page.text.100" m="md" p="md" w="full">
      This is the Box
    </Box>
  )
}