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. `"a"` `"abbr"` `"address"` `"area"` `"article"` `"aside"` `"audio"` `"b"` `"base"` `"bdi"`	`"div"`
background	Background color. Accepts a color token. `unknown` `unknown`	-
borderColor	Border color. Accepts a color token. `unknown`	-
borderRadius	Border radius. Accepts a radius token, or an object of radius tokens for different breakpoints. `typeParameter` `unknown`	-
borderWidth	Border-width. If this is not set there will be no border. `typeParameter` `unknown` `unknown` `unknown`	-
padding	Spacing around children. Accepts a spacing token or an object of spacing tokens for different breakpoints. `typeParameter` `unknown`	-
paddingBlock	Vertical padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints. `typeParameter` `unknown`	-
paddingInline	Horizontal padding around children. Accepts a spacing token or an object of spacing tokens for different breakpoints. `typeParameter` `unknown`	-
shadow	Shadow on box. Accepts a shadow token. `unknown`	-
Snippets
children	Content		-

Properties included from: HTMLAttributes<HTMLElement>