Section
The full-width band, and the outermost one is the page's container boundary — background, clip, and the guide overlay. Spacing lives on the Stack inside it.
Each example measures itself, so its gutters are to scale rather than to the page's. The arrangements are exact.
| Prop | Description | Default | Control |
|---|---|---|---|
| as | element to render: section by default, or header, nav, aside, footer, article, divsectiondivheadernavasidefooterarticle | section |
|
| aria-label | the band's accessible name. Set it when the band is a landmark: an unnamed section or nav is not one | ||
| bg | a background for the band, from the colour rolesnonesurface-1surface-2surface-3bgbg-overlay | none |
|
| clip | clip content to the band. Off lets content overlap the band's edge | true | |
| query | for a nested band that stands alone (a card, a demo): spacing and breakpoints inside it measure this band, not the page. Nothing inside then aligns with the rest of the page | false | |
| show | draw the layout guide overlay, for development | false |