Layouts
Page patterns
Every screen is the same three layers: the app shell, a page head with its tab row, then rows of blocks on a small set of grids. Grids read the panel's own width, so they reflow the same way whether the window shrinks or the sidebar opens.
App shell
The frame with the light streaks and the frosted panel. Navigation is a sidebar that collapses to icons (a drawer on phones) or a dark switcher in the top bar. People choose in the gear menu; it is remembered.
| Prop | Values | Default | What it does |
|---|---|---|---|
nav | 'sidebar' | 'tabs' | 'sidebar' | Where the pages are listed |
groups / current | { title?, items: [{ href, label, icon, count? }] }[] · path | — | The pages; the most specific match is lit |
collapsed / drawer | bindable booleans | false | Sidebar collapsed to icons · phone drawer open |
brand / trailing / footer | snippets | — | Logo · top-bar tools · bottom of the sidebar |
main | bindable element | — | The page element, for the page-change animation |
Page anatomy
Head: title, one line that says what is on screen, the page's tools. Tab row: what to show on the left, how to show it on the right. Then rows.
Projects
10 jobs · sorted by budget
- PageHead crumbs · title · status · sub · tools
- TabRow start · end (each a full line on phones)
- Row one of the grids below
Grids
Pick a grid and drag the width: the boxes reflow at the same points the panel does. The labels are the blocks each grid holds on the dashboard.
1.15 : 1 : 0.9. Two + one full width under 1100px; one column under 700px.
Rows nest: one column of a row can be a <Row layout="stack"> of blocks, and a stack can hold a <Row layout="duo"> — the Overview's loan with two figures under it.
Bento
New · a mosaic of tiles of different sizes for a home screen (the Today template): four columns, two under 900px, one on phones. Tiles fill in order; gaps are packed.
Spacing
Rows sit 16px apart with 16px between blocks (12px on phones). Inside a card: 24 / 26px padding (20px on phones). Page head: 26px above, 14px below. Density scales all of it together.
| Between blocks, between rows | 16px | 12px phone |
| Card padding | 24 × 26px | 20px phone |
| Small card padding | 16 × 18px | 14 × 16px phone |
| Panel padding | 22 × 28px | 14 × 12px phone |
| Panel width | 1360px max | full width phone |