`<Box />`

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

Open in Arcade

Properties

gridColumn?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>gridColumn?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>

column?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>column?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>

deprecated

Use gridColumn instead. Will be removed in v4.

gridColumnStart?: 'auto' | number | Array<'auto' | number>gridColumnStart?: 'auto' | number | Array<'auto' | number>

columnStart?: 'auto' | number | Array<'auto' | number>columnStart?: 'auto' | number | Array<'auto' | number>

deprecated

Use gridColumnStart instead. Will be removed in v4.

gridColumnEnd?: 'auto' | number | Array<'auto' | number>gridColumnEnd?: 'auto' | number | Array<'auto' | number>

columnEnd?: 'auto' | number | Array<'auto' | number>columnEnd?: 'auto' | number | Array<'auto' | number>

deprecated

Use gridColumnEnd instead. Will be removed in v4.

display?: 'none' | 'block' | 'grid' | 'flex' | 'inline-block' | Array<'none' | 'block' | 'grid' | 'flex' | 'inline-block'>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'>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'>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[]

gridRow?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>gridRow?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>

row?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>row?: 'auto' | 'full' | number | Array<'auto' | 'full' | number>

deprecated

Use gridRow instead. Will be removed in v4.

gridRowStart?: 'auto' | number | Array<'auto' | number>gridRowStart?: 'auto' | number | Array<'auto' | number>

rowStart?: 'auto' | number | Array<'auto' | number>rowStart?: 'auto' | number | Array<'auto' | number>

deprecated

Use gridRowStart instead. Will be removed in v4.

gridRowEnd?: 'auto' | number | Array<'auto' | number>gridRowEnd?: 'auto' | number | Array<'auto' | number>

rowEnd?: 'auto' | number | Array<'auto' | number>rowEnd?: 'auto' | number | Array<'auto' | number>

deprecated

Use gridRowEnd instead. Will be removed in v4.

sizing?: 'content' | 'border'