Box

Box is one of the core components. It serves as a wrapper for most layout needs (e.g. grids and spacing).

The Box component wraps your component. It creates a new DOM element, a div-element by default that can be changed with the “as” property.

Props

Examples

Simple box setting backgroundcolor, width 50% and padding

A box with properties: bgColor="grey-400" w="1/2" p=2

Usage

A Box generating a span instead of a div

Using the as="span" property, I am no longer a div. I am a span!

Using flexbox

Box1
Box2
Box3

Using mediaquerys

Box1
Box2
Box3

Guidelines

Always prefer to use the Box element instead of a div. It will still be a div element but with the added properties of styling.