Network · strip-map
Strip map
The route map above a train's doors: a short horizontal route with a reading line that says what comes next. For an order on its way, or a ticket's days.
Strip map
The reading line is what people scan: Next and Towards, as in the train. The route below shows where it is. Always horizontal, so keep it to six stops or fewer; the route tracker is for longer journeys with panels.
NextPick upNeeds checking
- OrderNov 2
- PayNov 2
- Verify
- Pick up
Show codeHide code
<StripMap
line="danus"
stops={[{ label: "Order" }, { label: "Pay" }, { label: "Verify" }, { label: "Pick up" }]}
current={2}
status={<StatusBadge domain="order" value="awaiting_verification" />}
aria-label="Order progress"
/>States
Now atPick upPaid
- OrderNov 2
- PayNov 2
- Verify
- Pick up
ArrivedPick upPicked up
- OrderNov 2
- PayNov 2
- Verify
- Pick up
Stopped atPayExpired
- OrderNov 2
- PayNov 2
- Verify
- Pick up
Show codeHide code
<StripMap stops={stops} current={3} state="arrived" />
<StripMap stops={stops} current={1} state="stopped" />| State | Reading line | Route |
|---|---|---|
| running | Next · the next stop, Towards · the last one. At the last stop: Now at. | Passed stops filled, the current one with the halo. |
| arrived | Arrived · the last stop. | Every stop filled. |
| stopped | Stopped at · the current stop. | A danger terminus after it; later stops gray out. Say why in the status. |
Screen
With screen it sits in an ink band, like the display in the carriage. Use it where the map is the subject: the top of an order's own page.
NextVerifyTowardsPick up
- OrderNov 2
- PayNov 2
- Verify
- Pick up
Show codeHide code
<StripMap screen line="danus" stops={stops} current={1} />Rules
- An
<ol>witharia-current="step"on the current stop; the reading line repeats it in words. - Stops are nouns from the screen (Order, Pay, Verify, Pick up), not statuses. The status badge says the status.
- Nothing blinks: the halo is static, as everywhere.
Don’t
A percentage progress bar, or a stepper with numbered circles.
Do
The strip map on the campaign's line, with the next stop named.