Early access. Read the blog post

Box

The Box component is a basic layout wrapper component which provides utility properties for flex, margins and padding.

Properties  

column?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>
columnStart?: 'auto' | number | Array<'auto' | number>
columnEnd?: 'auto' | number | Array<'auto' | number>
display?: 'none' | 'block' | 'grid' | 'flex' | 'inline-block' | Array<'none' | 'block' | 'grid' | 'flex' | 'inline-block'>
flex?: number | number[]
Sets the flex CSS attribute. The property is responsive.
height?: 'stretch' | 'fill' | Array<'stretch' | 'fill'>
margin?: number | number[]
Applies margins to all sides. The property is responsive.
marginX?: number | number[]
Applies margins to the left and right sides. The property is responsive.
marginY?: number | number[]
Applies margins to the top and bottom sides. The property is responsive.
marginTop?: number | number[]
marginRight?: number | number[]
marginBottom?: number | number[]
marginLeft?: number | number[]
overflow?: 'visible' | 'hidden' | 'auto' | Array<'visible' | 'hidden' | 'auto'>
padding?: number | number[]
paddingX?: number | number[]
paddingY?: number | number[]
paddingTop?: number | number[]
paddingRight?: number | number[]
paddingBottom?: number | number[]
paddingLeft?: number | number[]
row?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>
rowStart?: 'auto' | number | Array<'auto' | number>
rowEnd?: 'auto' | number | Array<'auto' | number>
sizing?: 'content' | 'border'
Updated May 26, 2021 @ 03:25
On this page

Made withby folks at