divby default, but the
componentprop can be used to return any valid HTML element; all valid HTML attributes will be forwarded to the DOM element.
Boxis 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:
- CSS Grid
Boxtaps 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:
widthSm: Small and above
widthMd: Medium and above
widthLg: Large and above
widthXl: Extra large and above
Gridare re-exports of
displayproperty set to
gridrespectively.They can accept any of
Boxas their root element and can therefore accept all
|children||The content of the component or a function used to render the component.|
|component||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.
|Border||Sets values related to borders, including |
|Color||Sets the |
|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 |
|Spacing||Sets properties related to spacing, such as |
|Typography||Sets text alignment via the |
Boxis 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