Dashboard

A bus operator's control board drawn as a signal box's mimic panel: a strip of counters, three routes with a lamp for every bus, a lever frame of services in tabs, and a side plate for tonight's last buses.

A shell with a sticky aside. The counters are billboards with data-numeric in a cluster on one bordered box; the panel is an inline SVG in a scroller, drawn by a script from the same data as the table, so it keeps its drawn size and scrolls sideways on a phone. Each lamp links to its row in the lever frame, three striped tables under tabs, with badges for the lever plates and the states; a row under the pointer lights its lamp. The nav carries a dropdown and hides its date plate below a width with data-show; the aside holds an alert that can be closed and a stack with data-rule. The world is its own, a dark enamelled panel, made of a theme of Yeti tokens and a short stylesheet for the drawing and what Yeti has no token for yet.

Open in new tab

Or drag the box's corner to see the page at any width. It is written with nothing but Yeti's classes and attributes, and every element on it is validated against the manifest the way each demo on this site is.