Box
Usage
Use Box when you need a padded, optionally bordered surface and no richer component fits — a summary panel, a group of fields, a placeholder slot. It exposes only token steps, so apps never invent a 13px padding or a one-off grey.
- Reach for Card when the block has a title, actions or links; for Stack or Grid when you only need spacing between children.
- Box never sets an outer margin. The parent layout decides spacing.
- Use
--surface-raisedonly for things that float above the page; flat panels use--surface-subtleor a border.
Anatomy
- Container —
.box(any element:div,section,li) - Padding —
.box--pad-{2|3|4|6|8} - Surface —
.box--surface | -subtle | -sunken | -raised - Border and radius —
.box--bordered,.box--radius-{md|lg}
Examples
Box
Next service
Truck HT-507 · 12 Nov · Oil and filter change
3 vehicles are due for inspection this week.
Drop a photo of the damage here, or attach it from the work order.
Van KX-219
In workshop · Bay 4
pad-2
pad-3
pad-4
pad-6
pad-8
<div class="box box--pad-4 box--bordered box--radius-md">
<p class="text-overline">Next service</p>
<p class="text-body">Truck HT-507 · 12 Nov · Oil and filter change</p>
</div>
<div class="box box--pad-6 box--surface-raised box--radius-lg">…</div>API
| Hook | Values | Purpose |
|---|---|---|
.box | block class | Block container with no margin |
.box--pad-2 | -3 | -4 | -6 | -8 | modifier class | Padding from --space-* |
.box--surface | -surface-subtle | -surface-sunken | -surface-raised | modifier class | Background (raised adds elevation shadow) |
.box--bordered | modifier class | 1px default border |
.box--radius-md | -lg | modifier class | Corner radius (md = Fleetline's 8px shape) |
--box-padding, --box-radius | custom property | Override with another token, never a raw value |
Do and don't
Bay 4 · 2 vehicles waiting
Bay 4
Accessibility
- Box is presentational: it adds no role. Use a semantic element (
sectionwith a heading,li) when the content needs one. - No keyboard interaction. Don't make a Box clickable; put a link or button inside it.
- Surfaces that differ only by fill get a visible border in forced-colors mode.
- Text on every surface keeps ≥ 4.5:1 (
color.text.defaulton sunken and raised surfaces is a checked contrast pair).
Tokens
| Custom property | Purpose |
|---|---|
--space-2 | -3 | -4 | -6 | -8 | Padding steps |
--color-bg-surface | -subtle, --color-elevation-surface-sunken | -raised | Surfaces |
--elevation-raised | Raised shadow |
--color-border-default, --border-width-thin | Border |
--radius-md | -lg | Radius |