Components / Layout
Band
A full-width page section on a tonal background (surface, container or primary) that wraps a Container.
@ruckc/truss-ui Layout
Import
import { Band } from '@ruckc/truss-ui';Playground
background
padding
size
API
The element to render.
| Prop | Type | Default | Description |
|---|---|---|---|
background | 'surface' | 'container' | 'primary' | 'surface' | The tonal surface behind the band. `primary` flips the text to the on-primary colour. |
padding | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 10 | Vertical padding: a spacing token step (`--tr-space-N`), top and bottom. |
size | 'sm' | 'md' | 'lg' | 'full' | 'lg' | Width cap of the inner Container. |
as | string | 'section' | The element to render. |
children snippet | Snippet | — | Content, as a Svelte snippet. |