Box

Box is a composition of several high-level layout components which provides spacing, layout, and color helpers.

Box returns a div by default, but the component prop can be used to return any valid HTML element; all valid HTML attributes will be forwarded to the DOM element.
Box is a generic building block intended to replace the Bootstrap-era helper classes that we want to maintain. It is designed to apply simple, opinionated CSS customizations, including:
- Borders
- Colors
- Flexbox
- CSS Grid
- Layout
- Spacing
- Typography
Box taps into our design tokens to apply opinionated values for colors and spacing:
- Spacing units are expressed in increments of our spacing unit (4px), and are converted into REM units.
- Color values are expressed by our color palette, although they are formatted using dot notation rather than hyphenation.
Each prop tagged as a “responsive property” contains a corresponding set of props for each breakpoint. For example:
- width: Base
- widthSm: Small and above
- widthMd: Medium and above
- widthLg: Large and above
- widthXl: Extra large and above
Read more about our responsive breakpoints »
Flex and Grid are re-exports of Box with the display property set to flex or grid respectively.They can accept any of Box’s props.
FlexItem, GridItem, Skeleton, and Typography implement Box as their root element and can therefore accept all Box props.

React props
Name	Type	Default	Description
children	`ReactNodefunction`		The content of the component or a function used to render the component.
component	`ElementType`	div	HTML element to render.

Box is a composition of several sub-components, each with their own collection of props to modify themed CSS properties.

The table below provides a reference as to which sub-component controls which behavior.

You can find the full prop table on Storybook.

Box sub-components
Sub-component	Purpose
Border	Sets values related to borders, including `border-radius`.
Color	Sets the `color` value for text content and `background-color` for elements.
Flex	Sets flexbox properties on the flex container (parent) element.
FlexItem	Sets flexbox properties on the flex items (children).
Grid	Sets CSS grid properties on the grid container (parent) element.
GridItem	Sets CSS grid properties on the grid items (children).
Layout	Sets properties related to setting dimensions and visibility of components, including the `display` and `vertical-align` properties.
Spacing	Sets properties related to spacing, such as `padding` and `margin`.
Typography	Sets text alignment via the `text-align` property.

Box is a flexible component that can take many shapes, so we have not baked in any specific accessibility features
Engineers are encouraged to leverage appropriate HTML attributes when using Box