Components

Box

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>