Components
Line bar
The lines serving a station, as one rounded vertical bar per CTA line in contrast order. Used in stop rows, stop cards and search results.
Contract: components/line-bar.yaml. States are drawn live by transit.js.
Loading the contract…
iOS app specification
The app's rendering of this component, from the v3 spec.
Line bar
All lines at a stop as equal-width, evenly spaced rounded rectangles. Used wherever lines are read, not tapped.
| Size | Each segment is 10 × 24 with radius 3 |
|---|---|
| Spacing | Fixed 3pt gap between segments. Segment size and gap never change with route count; total width grows from the count. Six-line stations are the current actual max |
| Order | Maximise the smallest colour difference between neighbours, then the total; ties follow CTA order. Deterministic per set |
| Used in | Stop cards, sheet header, station rows |
| Not used in | Route filter and arrival rows, which stay circles |