Sheet 02.02 / Components · Layout

Band

The lattice between sections: pineapple skin drawn as cross-hatching. It is 20px tall, full width, two 45° hairline gradients in line. Purely decorative.

CLASSb-bandDRAWNCLAUDECHECKEDBOLUOLICENSEMIT

Fig. 1 — bandlive, on a 768 rail

between sections

Section A

Section B

Anatomy

Parts

Part	Class	Notes
Band	`.b-band`	Full width, band (20px) tall, aria-hidden.

Markup

Code

bundle.css

<div class="b-sheet">
  <div class="b-row"><div class="b-rail b-pad" style="padding:16px 32px">Section A</div></div>
  <div class="b-band" aria-hidden="true"></div>
  <div class="b-row"><div class="b-rail b-pad" style="padding:16px 32px">Section B</div></div>
</div>

Use one between every major section.
Mark it aria-hidden; it says nothing.

Don't

Stack two bands in a row.
Use it inside a section as a divider; that is a row's hairline.