Clark/Lake
Outer Loop
KimballDue
Harlem/Lake7 min
Components
Stop card
A saved or nearby stop as a card: name, subtitle and routes on the left, the next two arrivals in a ruled column on the right.
Contract: components/stop-card.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.
Stop card
Name, subtitle, lines and the next two arrivals on Home and in Nearby. The whole card opens the stop.
Merchandise Mart
0.2 mi · Southbound
Loop3 min
Loop8 min
Halsted & Roosevelt
0.1 mi · Northbound
WavelandDelayed
Central/Harrison7 min
Clark & Belmont
Northbound
| Padding | 14, radius 12, Card fill |
|---|---|
| Name | Body 600, one line |
| Lines | Line bar for trains. Bus routes show as many capsules as fit on one line and never wrap; the rest collapse into a trailing +N capsule that counts the hidden routes and names them for VoiceOver |
| Arrivals panel | Left hairline; identity takes 55% of the card’s inner width and arrivals 45%. At accessibility sizes the arrivals stack under the lines |
| Favorite | Favorite is a passive 18pt rounded star, filled Favorite gold only when the stop is saved. Unsaved cards show no star and reserve no space. Cards never toggle favorites; only the full stop sheet’s 44pt favorite button adds or removes a favorite. |
| Subtitle | Saved stops show direction; unsaved stops lead with distance when location is known |
| Open | The whole card opens the stop. A favorite card or the Live card opens on its saved direction; other cards open on the stop’s first direction |
| Nearby order | Nearby stops are ordered by distance, but a stop whose routes are all already served by a strictly closer stop drops below stops that add new routes; there is no bus/train preference. Example: Route 22 at 0.02 mi, Red Line at 0.04 mi, Route 8 at 0.05 mi, then the redundant Route 22 at 0.03 mi. |
| Swipe actions | Every stop or station card/row exposes its own leading Live Track swipe action. Swiping one row reveals only that row’s action. Favorite rows additionally retain their trailing destructive removal action. Live Track starts the swiped stop’s Live Activity. |
| Remove favorite | Removing a favorite presents a centered native destructive alert with Cancel and Remove; Remove is the destructive action. |