Templates
Page layouts with placeholder content: where the regions go, how they reflow, and the rhythm text follows. They show structure, not final content.
App shells
- 2026 SaaS layout
- Icon rail, list sidebar, tabbed main content, details sidebar and status bar; the side panels become drawers and the rail a bottom tab bar on smaller screens
- App shell with sidebar
- Sidebar and top bar app shell with every global region: notice banner, offline status, toast, announcer and session warning
- App shell with top bar
- Top-bar-only shell: horizontal navigation, page header with actions, centred content and footer
- PWA layout
- Installed-app layout: safe areas, standalone and window-controls-overlay modes, install button, offline and update notices
Mobile
- Mobile bottom sheet
- A bottom action sheet for choices on a phone, built on a modal dialog
- Mobile drawer
- A slide-out navigation drawer for more than four sections, built on a modal dialog
- Mobile landscape
- The same markup on its side: navigation rail on the start edge, list and detail side by side, side safe areas
- Mobile portrait
- One phone layout held upright: top bar, list then detail, bottom tab bar
Type
- Heading rhythm
- The same headings in content rhythm and in app rhythm, with an optional 24px line grid