Box

Components

Code

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.

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

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:

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