Sheet 02.10 / Components · Content

Tracks

Three columns, each with its own pineapple drawing, a label and one line. On phones the columns stack into rows with the drawing on the left.

CLASSb-tracksDRAWNCLAUDECHECKEDBOLUOLICENSEMIT

Fig. 1 — trackslive, on a 768 rail

home / tracks

01 / TokensColour, type, space

Every value has a name and a note on where it goes.

02 / ComponentsBuilt from the tokens

Classes, not a framework; copy what you need.

03 / DrawingsOne grammar

The same grid, outline and lattice in every figure.

Anatomy

Parts

Part	Class	Notes
Tracks	`.b-tracks`	Three columns split by hairlines.
Track	`.b-track`	Drawing, label, subtitle and one line; the whole column is a link.

Markup

Code

bundle.css

<div class="b-sheet">
  <div class="b-row">
    <div class="b-rail b-tracks">
      <a class="b-track" href="#tokens"><img src="/brand/pixel.svg" alt=""><span class="b-caption">01 / Tokens</span><span class="b-subtitle">Colour, type, space</span><p>Every value has a name and a note on where it goes.</p></a>
      <a class="b-track" href="#components"><img src="/brand/ring.svg" alt=""><span class="b-caption">02 / Components</span><span class="b-subtitle">Built from the tokens</span><p>Classes, not a framework; copy what you need.</p></a>
      <a class="b-track" href="#drawings"><img src="/brand/half.svg" alt=""><span class="b-caption">03 / Drawings</span><span class="b-subtitle">One grammar</span><p>The same grid, outline and lattice in every figure.</p></a>
    </div>
  </div>
</div>

Give each track a different drawing and keep it there.
Keep exactly three tracks.

Don't

Swap the drawings between tracks.
Add a fourth column.