Box

Components

The Box component is a low-level primitive used for layout purposes. It can be used to create grid layouts, apply padding or margin, and more.

Here is an example of how the Box component can be used to apply padding and border around its children.

This is a box.

import { Box } from '@sproutsocial/racine'

<Box 
  p={400}
  border={500}
  borderColor='purple.600'
  height='100%'
>
  This is a box.
</Box>

<Box 
  p={400}
  border={500}
  borderColor='purple.600'
  height='100%'
>
  This is a box.
</Box>

Properties

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

COMMON

BORDER

LAYOUT

POSITION

FLEXBOX

Learn more

Recipes

2 elements side-by-side:

<Box display='flex'>
  <Box width={1/2} height='150px' bg='blue.200' />
  <Box width={1/2} height='150px' bg='red.200' />
</Box>

<Box display='flex'>
  <Box width={1/2} height='150px' bg='blue.200' />
  <Box width={1/2} height='150px' bg='red.200' />
</Box>

Centering elements horizontally and vertically:

This content will be centered within the box.

<Box 
  display='flex'
  alignItems='center'
  justifyContent='center'
  bg='neutral.100'
  color='neutral.1000'
  p={600}
>
  This content will be centered within the box.
</Box>

<Box 
  display='flex'
  alignItems='center'
  justifyContent='center'
  bg='neutral.100'
  color='neutral.1000'
  p={600}
>
  This content will be centered within the box.
</Box>