Band
.band
Band — a full-width horizontal region of a page, and the space around it.
Examples
A bare band
No paint, so its column's margin escapes and collapses with its neighbour's.
Another bare band
Text to text: one gap, not two. Adjacent margins collapse to the larger of the pair.
A band that paints
The paint traps the column's margin, so the band's padding is that same margin. Nobody declared a padding here.
And the one after it
The two painted edges touch at zero, which is how two adjacent bands read, and the text still sits its full distance from each edge.
<section class="band">
<div class="center">
<h2 class="section-title">A bare band</h2>
<p>No paint, so its column's margin escapes and collapses with its neighbour's.</p>
</div>
</section>
<section class="band">
<div class="center">
<h2 class="section-title">Another bare band</h2>
<p>Text to text: one gap, not two. Adjacent margins collapse to the larger of the pair.</p>
</div>
</section>
<section class="band band-fill">
<div class="center">
<h2 class="section-title">A band that paints</h2>
<p>The paint traps the column's margin, so the band's padding <em>is</em> that
same margin. Nobody declared a padding here.</p>
</div>
</section>
<section class="band band-fill">
<div class="center">
<h2 class="section-title">And the one after it</h2>
<p>The two painted edges touch at zero, which is how two adjacent bands read,
and the text still sits its full distance from each edge.</p>
</div>
</section>Measured on this markup: bare to bare is 50px of text-to-text, bare to painted is 100 (50 of empty page, then 50 of breathing room inside the paint), and two painted edges touch at 0.
One declared number — --rhythm-section — produces all three, because collapsing margins compose and a gap cannot.
Do not do this
The margin escapes the band, so the paint starts where the gap ends and this heading sits flush against the top edge.
<section class="band" style="background: var(--color-surface-raised)">
<div class="center">
<h2 class="section-title">Do not do this</h2>
<p>The margin escapes the band, so the paint starts where the gap ends and
this heading sits flush against the top edge.</p>
</div>
</section>The gap above the band and the breathing room inside it become the same coloured space.
band-fill paints and sets display: flow-root in one class precisely so this is not a thing you can forget — and check:shapes fails a consumer that paints a bare .band.
Tokens 2
Level 2, declared on .band itself. Set any of them on that selector to restyle this block without touching the skin.
| Token | Default |
|---|---|
| --band-background | var(--color-surface-raised) |
| --band-rhythm | var(--rhythm-section, 3.125rem) |
Variants and states
Variants
.band-fill.band-page.band-tight
Inside it
.band-contain
State it reads
None.
src/css/blocks/band.css · npx mostlycss add band