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.

import { Box } from '@sproutsocial/racine'

<Box display="flex" bg="app.background.base" padding={40}>
  <Box p={400} border={500} bg="container.background.base" borderColor="container.border.base" height="100%">
    This is a box.
  </Box>
</Box>

Properties

Recipes

2 elements side-by-side:

<Box display="flex">
  <Box
    width={1 / 2}
    height="150px"
    border={500}
    borderColor="container.border.decorative.blue"
    bg="container.background.decorative.blue"
  />
  <Box
    width={1 / 2}
    height="150px"
    border={500}
    borderColor="container.border.decorative.red"
    bg="container.background.decorative.red"
  />
</Box>

Centering elements horizontally and vertically:

<Box
  display="flex"
  alignItems="center"
  justifyContent="center"
  bg="container.background.base"
  border={500}
  borderColor="container.border.base"
  color="text.body"
  p={600}
>
  This content will be centered within the box.
</Box>