Box
A padded block with a background, rounded corners and a shadow.
A box holds anything: text, a form or a small widget.
Clickable box
On a link the whole box is clickable and lifts on hover.
Styles
.outlined swaps the shadow for a border. .rounded and .square change the corners.
Outlined
Rounded
Square
Box or card
A box is one plain block. A card adds header and footer bands and size classes.
Variables
| Variable | Default |
|---|---|
--i-box-padding | 1.25rem |
--i-box-border-radius | var(--i-border-radius) |
--i-box-color-text | var(--i-color-text) |
--i-box-color-background | var(--i-color-background) |
--i-box-color-border | var(--i-color-subtle-border) |
--i-box-shadow | var(--i-shadow) |
--i-box-hover-shadowLinked box hover and press | 0 0.5em 1em -0.125em color-mix(in oklab, var(--i-color-text) 10%, transparent), 0 0 0 var(--i-border-width) var(--i-color-link) |
--i-box-active-shadow | inset 0 0.0625rem 0.125rem color-mix(in oklab, var(--i-color-text) 20%, transparent), 0 0 0 var(--i-border-width) var(--i-color-link) |