Box

Box is a layout component that is often used as a building block for other components. It sets padding, border, etc. with design tokens.

Read more about this component in the Aksel documentation.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, ipsum!

Properties

Property	Description	Default	Control
Properties
as	HTML element to render as. `unknown`	`"div"`
background	CSS `background-color` property. Accepts a background color token. `"default"` `"input"` `"raised"` `"sunken"` `"overlay"` `unknown` `unknown` `unknown` `unknown` `unknown`	-
borderColor	CSS `border-color` property. Accepts a border color token. `unknown` `"neutral"` `"accent"` `"info"` `"success"` `"warning"` `"danger"` `"brand-magenta"` `"brand-beige"` `"brand-blue"` `"meta-purple"` `"meta-lime"` `unknown` `unknown` `unknown`	-
borderRadius	CSS `border-radius` property. Accepts a radius token or an object of radius tokens for different breakpoints. `unknown`	-
borderWidth	CSS `border-width` property. If this is not set there will be no border. `unknown`	-
bottom	CSS `bottom` Accepts a spacing token or an object of spacing tokens for different breakpoints. `unknown`	-
flexBasis	CSS `flex-basis` `unknown`	-
flexGrow	CSS `flex-grow` `unknown`	-
flexShrink	CSS `flex-shrink` `unknown`	-
gridColumn	CSS `grid-column` `unknown`	-
height	CSS `height` `unknown`	-
inset	CSS `inset`. Accepts a spacing token or an object of spacing tokens for different breakpoints. `unknown`	-
left	CSS `left` Accepts a spacing token or an object of spacing tokens for different breakpoints. `unknown`	-
margin	Margin around element. Accepts a spacing token or an object of spacing tokens for different breakpoints. `unknown`	-
marginBlock	Vertical margin around element. Accepts a spacing token or an object of spacing tokens for different breakpoints. `unknown`	-
marginInline	Horizontal margin around element. Accepts a spacing token or an object of spacing tokens for different breakpoints. `unknown`	-
maxHeight	CSS `max-height` `unknown`	-
maxWidth	CSS `max-width` `unknown`	-
minHeight	CSS `min-height` `unknown`	-
minWidth	CSS `min-width` `unknown`	-
overflow	CSS `overflow` `unknown`	-
overflowX	CSS `overflow-x` `unknown`	-
overflowY	CSS `overflow-y` `unknown`	-
padding	Padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints. `unknown`	-
paddingBlock	Vertical padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints. `unknown`	-
paddingInline	Horizontal padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints. `unknown`	-
position	CSS `position` `unknown`	-
right	CSS `right` Accepts a spacing token or an object of spacing tokens for different breakpoints. `unknown`	-
shadow	Shadow on box. Accepts a shadow token. `"dialog"`	-
top	CSS `top` Accepts a spacing token or an object of spacing tokens for different breakpoints. `unknown`	-
width	CSS `width` `unknown`	-
Snippets
children	Content		-