Skip to content
Jaringan

Network · primitives

Route and station

Every network graphic is built from a handful of utilities and one list component. Color comes from --line: brand red by default, or a division set with data-line.

Stations

Utility / componentDraws
route · route-vA horizontal / vertical line in the current --line color
stationAn upcoming stop: bg fill, ring in the line color
station-passedA passed stop: filled
station-hereThe current stop: filled, with a static halo
station-interchangeA capsule with an ink ring, where lines meet
route-drawScroll-linked draw-in for routes below the fold
data-line="…"Sets the line for an element and its descendants
Preview
upcomingpassedhereinterchange
Show code
<Station />
<Station state="passed" />
<Station state="here" />
<Interchange />

Route list

RouteList is an ordered list; each RouteStop draws its station and the segment to the next one, so stops carry their own state, color or terminus. The drawn parts are aria-hidden; the list and its labels carry the meaning.

Preview
  1. Online form
  2. Written test
  3. InterviewYou are here
  4. Results
  1. Online formSubmitted · Sep 12
  2. InterviewYou are here
  3. ResultsSep 27
Show code
<RouteList>
  <RouteStop state="passed"><span className="type-sign">Online form</span></RouteStop>
  <RouteStop state="here" current="step">
    <span className="type-sign">Interview</span>
    <span className="type-kicker text-accent-text">You are here</span>
  </RouteStop>
  <RouteStop><span className="type-sign text-muted">Results</span></RouteStop>
</RouteList>

Lines and color

Set a division on the list or on a single stop. Inside tone-ink, set data-line inside the band so the line takes its dark value.

Preview
bph
humas
medkref
sosbud
Show code
<RouteList data-line="humas">…</RouteList>
<Route data-line="sosbud" />

Terminus and transfer

A route can stop at a station with a danger terminus bar, gray out what it no longer reaches, or continue a short way onto another line.

Preview
  1. Form
  2. Interview
  3. Results
  1. Form
  2. Interview
  3. Results
Show code
<RouteStop state="here" end terminus>…</RouteStop>
<RouteStop dim>…</RouteStop>
<RouteStop state="here" extend="humas">…</RouteStop>

Rules

  • A station always has a visible label. The current station is also marked in text (“You are here”) or with aria-current.
  • Routes run horizontally or vertically, bends at 45° only; labels sit below horizontal routes and right of vertical ones.
  • Line weight and station size come from the utilities; don't restyle them per page.

Don’t

A network drawing behind a heading, or lines that connect nothing.

Do

Every route has labeled stations that are real campuses, sections, stages or events.