Layout
Where the layout switches, and what the map screen is built from.
Breakpoints
Each breakpoint is the width below which the screen changes.
- Under
breakpoint.desktop, the filters that are coming later go. - Under
breakpoint.tablet, the city name, the date and the legend go. - Under
breakpoint.phone, the sheet and the detail panel become bottom sheets, and the top bar shrinks tosize.top-bar-phone. - Under
breakpoint.compact-phone, the brand mark goes.
| Token | Value |
|---|---|
breakpoint.compact-phoneHide the brand mark | 1:8 380 px |
breakpoint.phoneBottom sheets, compact top bar | 1:8 760 px |
breakpoint.tabletHide city name, day and legend | 1:8 1180 px |
breakpoint.desktopBelow it, the filter chips marked "Later", for filters still to come, are hidden | 1:8 1400 px |
Page shell
The map fills the screen, and the page shell floats over it.
- A top bar of glass groups runs along the top: brand, clock, filters and settings.
- The overview sheet sits on the left and the detail panel on the right.
- Map controls and the scale sit at the bottom right, and the legend at the bottom centre.
- Toasts stand in one column at the bottom centre,
size.toast-widthwide andsize.panel-gapabove the bottom edge, over the legend for the few seconds they show. - Panels keep
size.panel-gapfrom the screen edge and from each other.
| Token | Value |
|---|---|
size.top-barTop bar group height (42 on phones) | 46 px |
size.top-bar-phoneHeight of a top bar group on phones | 42 px |
size.sheet-widthOverview sheet width on desktop | 1:8 376 px |
size.detail-widthDetail panel width on desktop | 1:8 364 px |
size.toast-widthToast width on wide screens | 1:8 360 px |
size.sheet-peekBottom sheet height when closed on phones | 1:8 182 px |
size.panel-gapDistance between floating panels and the viewport edge (8 on phones) | 12 px |
Stacking
From lowest to highest: map controls, the overview sheet, the highlight chip, the detail panel, the top bar, the tooltip, then a dialog over a color.scrim backdrop.
| Token | Value |
|---|---|
z-index.map-controlsLegend, map controls, scale, attribution | 3 |
z-index.sheetOverview sheet, kiosk bar | 4 |
z-index.highlightThe highlight chip, above the overview sheet and under the detail panel | 5 |
z-index.detailThe detail panel, above the highlight chip and under the top bar | 6 |
z-index.top-barBrand, filters and clock along the top of the map | 7 |
z-index.tooltipMap hover card, above every panel | 8 |
z-index.dialogModal dialog over everything | 10 |
color.scrimBackdrop behind modal dialogs | rgba(10, 14, 16, 0.42) |
Other layout properties
A measure lives here when two places must agree on it, such as a component and the list that virtualises its rows. A measure only one component's CSS reads stays in that CSS.
| Token | Value |
|---|---|
size.controlIcon buttons and filter chips | 34 px |
size.buttonHeight of a button, a link button, a tab and an accordion header | 36 px |
size.button-smHeight of a small button or link button | 30 px |
size.inputHeight of text, number and search fields and of selects | 38 px |
size.segmentHeight of an item in a segmented control | 32 px |
size.badgeHeight of a line badge; a disruption card header is at least this tall | 22 px |
size.badge-lgLarge line badge height | 34 px |
size.meter-trackHeight of a meter's, a progress bar's or a slider's track | 6 px |
size.checkboxThe box of a checkbox, and of a menu's checkbox item | 16 px |
size.dialog-widthWidest a dialog or alert dialog gets: about 60 characters of body a line | 1:8 440 px |
size.vehicle-rowVehicle table row height (virtualised list relies on it) | 52 px |
size.target-minSmallest touch or pointer target, from WCAG 2.2 target size (minimum) | 24 px |