The Box is a padded composition layout that acts like a lightweight surface when a full component (card, alert) is more than you need. Padding affects the inner content.
Examples
Padding only
Padding only.
Bordered
Bordered box with padding.
<div class="box" style="--box-padding: var(--space-lg)">
<p>Padding only.</p>
</div>
<h3>Bordered</h3>
<!-- code:start -->
<div class="box is-bordered" style="--box-padding: var(--space-lg)">
<p>Bordered box with padding.</p>
</div>
Bordered with Custom Background
Bordered box with background.
<div
class="box is-bordered"
style="--box-padding: var(--space-lg); --box-bg: var(--color-primary-soft)"
>
<p>Bordered box with background.</p>
</div>
Reference
Source: src/css/composition.css
Applies to
.box
Classes
| Class | Kind | Description |
|---|---|---|
.is-bordered | variant | Adds background, border, and radius to the box |
Tokens
| Token | Default | Description |
|---|---|---|
--box-padding | var(--space-md) | The inner padding for the box |