# CBDF Named Layouts (desktop) — human index

Source of truth for machines: `cbdf-layout-catalog-v1.json`.
Canonical pane order: Header → Left → Main (row-major) → Right → Footer → Overlay.
Mobile pair IDs are in the 0x0300 range (see `pair.mobile_layout_id`).

| ID | Hex | Slug | Title | Panes | Mobile | Category | Nav host |
|---:|-----|------|-------|------:|-------:|----------|----------|
| 256 | 0x0100 | `email-simple` | Simple single column | 1 | 768 | email | none |
| 257 | 0x0101 | `email-header-footer` | Email with header and footer | 3 | 769 | email | header |
| 258 | 0x0102 | `email-header-main` | Header + main | 2 | 770 | email | header |
| 259 | 0x0103 | `blog-right-sidebar` | Blog / docs with right sidebar | 4 | 771 | blog | header |
| 260 | 0x0104 | `blog-left-sidebar` | Blog / docs with left sidebar | 4 | 772 | blog | left |
| 261 | 0x0105 | `app-triple-column` | Header + left + main + right + footer | 5 | 773 | app | left |
| 262 | 0x0106 | `dashboard-left-rail` | Dashboard with full-height left rail | 4 | 774 | dashboard | left |
| 263 | 0x0107 | `dashboard-left-rail-nofooter` | Full-height left rail, no footer | 3 | 775 | dashboard | left |
| 264 | 0x0108 | `landing-hero` | Landing page hero + main + footer | 3 | 776 | landing | header |
| 265 | 0x0109 | `split-screen-2` | Split screen two columns | 3 | 777 | landing | header |
| 266 | 0x010A | `split-screen-2-footer` | Split screen + footer | 4 | 778 | landing | header |
| 267 | 0x010B | `grid-3-col` | Three-column content grid | 5 | 779 | grid | header |
| 268 | 0x010C | `grid-2x2` | 2×2 main grid | 6 | 780 | grid | header |
| 269 | 0x010D | `grid-2x2-bare` | 2×2 grid only | 4 | 781 | grid | none |
| 270 | 0x010E | `grid-3x2` | 3×2 main grid with header | 7 | 782 | grid | header |
| 271 | 0x010F | `grid-4-col` | Four-column strip | 6 | 783 | grid | header |
| 272 | 0x0110 | `shop-filters-left` | Shop with left filters | 4 | 784 | ecommerce | header |
| 273 | 0x0111 | `shop-product-detail` | Product detail split | 4 | 785 | ecommerce | header |
| 274 | 0x0112 | `portfolio-3col` | Portfolio three columns | 4 | 786 | portfolio | header |
| 275 | 0x0113 | `docs-full-left-nav` | Documentation full-height nav | 3 | 787 | docs | left |
| 276 | 0x0114 | `docs-left-right-toc` | Docs nav + main + on-this-page | 5 | 788 | docs | left |
| 277 | 0x0115 | `magazine-main-rail` | Magazine main + right rail | 5 | 789 | news | header |
| 278 | 0x0116 | `qmail-receipt` | QMail receipt / notice | 2 | 790 | email | none |
| 279 | 0x0117 | `qmail-newsletter` | Newsletter columns | 4 | 791 | email | header |
| 280 | 0x0118 | `modal-center` | Main with center modal overlay | 2 | 792 | overlay | none |
| 281 | 0x0119 | `modal-over-app` | App shell with modal overlay | 3 | 793 | overlay | header |
| 282 | 0x011A | `alert-banner-main` | Alert header + main | 3 | 794 | email | none |
| 283 | 0x011B | `pricing-3` | Pricing three tiers | 5 | 795 | landing | header |
| 284 | 0x011C | `contact-split` | Contact form split | 4 | 796 | landing | header |
| 285 | 0x011D | `inbox-list-detail` | Inbox list + detail | 3 | 797 | app | header |
| 286 | 0x011E | `timeline-single` | Timeline / feed single column | 3 | 798 | social | header |
| 287 | 0x011F | `settings-nav-main` | Settings: nav + panel | 3 | 799 | app | left |
| 288 | 0x0120 | `invoice-document` | Invoice / formal document | 3 | 800 | document | none |
| 289 | 0x0121 | `compare-two` | Two-product comparison | 4 | 801 | landing | header |
| 290 | 0x0122 | `holy-grail` | Holy grail (H L M R F) | 5 | 802 | classic | header |
| 291 | 0x0123 | `holy-grail-tall-sides` | Holy grail full-height side rails | 5 | 803 | classic | left |
| 292 | 0x0124 | `top-nav-main` | Top navigation + main | 2 | 804 | classic | header |
| 293 | 0x0125 | `bottom-nav-shell` | Bottom navigation shell | 2 | 805 | app | footer |
| 294 | 0x0126 | `media-watch` | Media player + sidebar | 3 | 806 | media | header |
| 295 | 0x0127 | `kanban-3` | Kanban three columns | 4 | 807 | app | header |
| 296 | 0x0128 | `report-cover` | Report cover page | 1 | 808 | document | none |
| 297 | 0x0129 | `report-body` | Report body with side notes | 4 | 809 | document | none |
| 298 | 0x012A | `auth-card` | Centered auth card | 2 | 810 | landing | none |
| 299 | 0x012B | `map-content` | Map / canvas + side panel | 3 | 811 | app | header |
| 300 | 0x012C | `wizard-steps` | Multi-step wizard | 3 | 812 | app | header |
| 301 | 0x012D | `empty-state` | Empty state centered | 1 | 813 | app | none |
| 302 | 0x012E | `qweb-marketing-full` | QWeb marketing full chrome | 5 | 814 | qweb | header |
| 303 | 0x012F | `legal-longform` | Long-form legal | 3 | 815 | document | none |
| 304 | 0x0130 | `dual-list` | Dual list chooser | 4 | 816 | app | none |
| 305 | 0x0131 | `status-1x4` | Status strip four KPIs | 6 | 817 | dashboard | header |

---

## 0x0100 — Simple single column

**Slug:** `email-simple` · **Category:** email · **Mobile layout:** 768

Single main body — classic email or article. No chrome.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | main | 0,0 | — | False | text, image, table |

### Nav

- Placement: **none** (pane index None)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+----------+
|   MAIN   |
+----------+
```

Use cases: qmail plain, article, sms-class body

---

## 0x0101 — Email with header and footer

**Slug:** `email-header-footer` · **Category:** email · **Mobile layout:** 769

Header band (logo/subject chrome), main body, footer signature band.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | text, image, nav |
| 1 | main | 0,0 | — | False | text, image, table, list |
| 2 | footer | — | — | False | text, nav |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: hamburger_header
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+--HEADER--+
|   MAIN   |
+--FOOTER--+
```

Use cases: qmail branded, newsletter

---

## 0x0102 — Header + main

**Slug:** `email-header-main` · **Category:** email · **Mobile layout:** 770

Top chrome with body; no footer pane.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav, text |
| 1 | main | 0,0 | — | False | text, image |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+--HEADER--+
|   MAIN   |
```

Use cases: qmail, notice

---

## 0x0103 — Blog / docs with right sidebar

**Slug:** `blog-right-sidebar` · **Category:** blog · **Mobile layout:** 771

Header nav, main article, right rail (TOC/related), footer.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav, text |
| 1 | main | 0,0 | 70 | False | text, image, table |
| 2 | right | — | 30 | False | nav, list, text |
| 3 | footer | — | — | False | text |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+----HEADER-----+
| MAIN  | RIGHT |
+----FOOTER-----+
```

Use cases: blog post, documentation, news article

---

## 0x0104 — Blog / docs with left sidebar

**Slug:** `blog-left-sidebar` · **Category:** blog · **Mobile layout:** 772

Left nav/TOC rail, main content, header and footer.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav, text |
| 1 | left | — | 25 | False | nav, list |
| 2 | main | 0,0 | 75 | False | text, image |
| 3 | footer | — | — | False | text |

### Nav

- Placement: **left** (pane index 1)
- Orientation: vertical
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: drawer_left
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+----HEADER-----+
| L |   MAIN    |
+----FOOTER-----+
```

Use cases: docs site, knowledge base

---

## 0x0105 — Header + left + main + right + footer

**Slug:** `app-triple-column` · **Category:** app · **Mobile layout:** 773

Classic app shell: top bar, left nav, content, right context, footer.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav, text |
| 1 | left | — | 18 | False | nav, list |
| 2 | main | 0,0 | 64 | False | text, table, image |
| 3 | right | — | 18 | False | list, text |
| 4 | footer | — | — | False | text |

### Nav

- Placement: **left** (pane index 1)
- Orientation: vertical
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: drawer_left
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+------HEADER-------+
| L |  MAIN  |  R  |
+------FOOTER-------+
```

Use cases: admin console, mail client, IDE-like page

---

## 0x0106 — Dashboard with full-height left rail

**Slug:** `dashboard-left-rail` · **Category:** dashboard · **Mobile layout:** 774

Left nav spans full height (beside header/footer). Main content + top header strip for breadcrumbs.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | False | text, nav |
| 1 | left | — | 18 | True | nav, list |
| 2 | main | 0,0 | 82 | False | text, table, image, list |
| 3 | footer | — | — | False | text |

### Nav

- Placement: **left** (pane index 1)
- Orientation: vertical
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: drawer_left
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
L | HEADER
L | MAIN
L | FOOTER
```

Use cases: SaaS app, analytics, settings

---

## 0x0107 — Full-height left rail, no footer

**Slug:** `dashboard-left-rail-nofooter` · **Category:** dashboard · **Mobile layout:** 775

App chrome without footer pane.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | False | text, nav |
| 1 | left | — | 20 | True | nav |
| 2 | main | 0,0 | — | False | text, table, image |

### Nav

- Placement: **left** (pane index 1)
- Orientation: vertical
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: drawer_left
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
L | HEADER
L | MAIN
```

Use cases: SPA shell, admin

---

## 0x0108 — Landing page hero + main + footer

**Slug:** `landing-hero` · **Category:** landing · **Mobile layout:** 776

Marketing landing: wide header/hero, single main, footer with links.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav, text, image |
| 1 | main | 0,0 | — | False | text, image, list |
| 2 | footer | — | — | False | nav, text |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: hamburger_header
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+--HERO/HEADER--+
|     MAIN      |
+----FOOTER-----+
```

Use cases: product page, campaign, signup

---

## 0x0109 — Split screen two columns

**Slug:** `split-screen-2` · **Category:** landing · **Mobile layout:** 777

Two equal main columns (1×2 grid), optional header for logo/nav.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav, text |
| 1 | main | 0,0 | 50 | False | text, image |
| 2 | main | 1,0 | 50 | False | text, image, list |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+--HEADER--+
| M0 | M1  |
```

Use cases: login/signup split, feature compare, before/after

---

## 0x010A — Split screen + footer

**Slug:** `split-screen-2-footer` · **Category:** landing · **Mobile layout:** 778

Two-column main with footer legal/links.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav |
| 1 | main | 0,0 | 50 | False | text, image |
| 2 | main | 1,0 | 50 | False | text, list |
| 3 | footer | — | — | False | text, nav |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+--HEADER--+
| M0 | M1  |
+--FOOTER--+
```

Use cases: marketing, onboarding

---

## 0x010B — Three-column content grid

**Slug:** `grid-3-col` · **Category:** grid · **Mobile layout:** 779

Header, three main columns, footer. Card/feature rows.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav, text |
| 1 | main | 0,0 | 33 | False | text, image |
| 2 | main | 1,0 | 34 | False | text, image |
| 3 | main | 2,0 | 33 | False | text, image |
| 4 | footer | — | — | False | text |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+----HEADER-----+
|M0 | M1 | M2 |
+----FOOTER-----+
```

Use cases: pricing tiers, feature cards, team

---

## 0x010C — 2×2 main grid

**Slug:** `grid-2x2` · **Category:** grid · **Mobile layout:** 780

Header + 2×2 main cells + footer. Dashboard tiles or gallery.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav |
| 1 | main | 0,0 | — | False | text, image, table |
| 2 | main | 1,0 | — | False | text, image, table |
| 3 | main | 0,1 | — | False | text, image, table |
| 4 | main | 1,1 | — | False | text, image, table |
| 5 | footer | — | — | False | text |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+--HEADER--+
| M0 | M1 |
| M2 | M3 |
+--FOOTER--+
```

Use cases: KPI quadrants, gallery, widgets

---

## 0x010D — 2×2 grid only

**Slug:** `grid-2x2-bare` · **Category:** grid · **Mobile layout:** 781

Four main cells, no header/footer — embed/widget board.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | main | 0,0 | — | False | text, image |
| 1 | main | 1,0 | — | False | text, image |
| 2 | main | 0,1 | — | False | text, image |
| 3 | main | 1,1 | — | False | text, image |

### Nav

- Placement: **none** (pane index None)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
| M0 | M1 |
| M2 | M3 |
```

Use cases: tile board, comparison

---

## 0x010E — 3×2 main grid with header

**Slug:** `grid-3x2` · **Category:** grid · **Mobile layout:** 782

Six main cells in 3 cols × 2 rows under a header.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav |
| 1 | main | 0,0 | — | False | text, image |
| 2 | main | 1,0 | — | False | text, image |
| 3 | main | 2,0 | — | False | text, image |
| 4 | main | 0,1 | — | False | text, image |
| 5 | main | 1,1 | — | False | text, image |
| 6 | main | 2,1 | — | False | text, image |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+----HEADER-----+
|0|1|2|
|3|4|5|
```

Use cases: product grid, photo gallery

---

## 0x010F — Four-column strip

**Slug:** `grid-4-col` · **Category:** grid · **Mobile layout:** 783

Header and four equal main columns.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav |
| 1 | main | 0,0 | 25 | False | text, image |
| 2 | main | 1,0 | 25 | False | text, image |
| 3 | main | 2,0 | 25 | False | text, image |
| 4 | main | 3,0 | 25 | False | text, image |
| 5 | footer | — | — | False | text |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+------HEADER-------+
|0|1|2|3|
+------FOOTER-------+
```

Use cases: services, portfolio strip

---

## 0x0110 — Shop with left filters

**Slug:** `shop-filters-left` · **Category:** ecommerce · **Mobile layout:** 784

Header (cart/nav), left filters, main product area, footer.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav, text |
| 1 | left | — | 22 | False | list, text |
| 2 | main | 0,0 | 78 | False | image, text, table, list |
| 3 | footer | — | — | False | nav, text |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: hamburger_header
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+----HEADER-----+
|FIL| PRODUCTS  |
+----FOOTER-----+
```

Use cases: product list, marketplace

---

## 0x0111 — Product detail split

**Slug:** `shop-product-detail` · **Category:** ecommerce · **Mobile layout:** 785

Header, left media, right details, footer.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav |
| 1 | main | 0,0 | 50 | False | image, text |
| 2 | main | 1,0 | 50 | False | text, list, table |
| 3 | footer | — | — | False | text |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+--HEADER--+
|IMG | INFO|
+--FOOTER--+
```

Use cases: PDP, item view

---

## 0x0112 — Portfolio three columns

**Slug:** `portfolio-3col` · **Category:** portfolio · **Mobile layout:** 786

Minimal header + 3 image columns.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav, text |
| 1 | main | 0,0 | — | False | image, text |
| 2 | main | 1,0 | — | False | image, text |
| 3 | main | 2,0 | — | False | image, text |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+--HEADER--+
| A | B | C |
```

Use cases: creative portfolio, gallery

---

## 0x0113 — Documentation full-height nav

**Slug:** `docs-full-left-nav` · **Category:** docs · **Mobile layout:** 787

Full-height left documentation nav, header, scrolling main.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | False | text, nav |
| 1 | left | — | 24 | True | nav, list |
| 2 | main | 0,0 | — | False | text, table, image, list |

### Nav

- Placement: **left** (pane index 1)
- Orientation: vertical
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: drawer_left
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
L | HEADER
L | DOCS MAIN
```

Use cases: API docs, manual, wiki

---

## 0x0114 — Docs nav + main + on-this-page

**Slug:** `docs-left-right-toc` · **Category:** docs · **Mobile layout:** 788

Left site nav, main article, right on-page TOC.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav, text |
| 1 | left | — | 20 | False | nav, list |
| 2 | main | 0,0 | 55 | False | text, image, table |
| 3 | right | — | 25 | False | nav, list |
| 4 | footer | — | — | False | text |

### Nav

- Placement: **left** (pane index 1)
- Orientation: vertical
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: drawer_left
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+------HEADER-------+
| L | MAIN | TOC  |
+------FOOTER-------+
```

Use cases: long-form docs, handbook

---

## 0x0115 — Magazine main + right rail

**Slug:** `magazine-main-rail` · **Category:** news · **Mobile layout:** 789

Header, two-row main feature area as 2-col top + full bottom via 2x2 partial — simplified as header, 2-col main, right, footer.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav, text, image |
| 1 | main | 0,0 | 45 | False | text, image |
| 2 | main | 1,0 | 30 | False | text, list |
| 3 | right | — | 25 | False | list, text, image |
| 4 | footer | — | — | False | nav, text |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+----HEADER-----+
|M0|M1| RIGHT |
+----FOOTER-----+
```

Use cases: news home, magazine

---

## 0x0116 — QMail receipt / notice

**Slug:** `qmail-receipt` · **Category:** email · **Mobile layout:** 790

Compact notice: optional header strip + main. Good for system mail.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | False | text |
| 1 | main | 0,0 | — | False | text, table, list |

### Nav

- Placement: **none** (pane index None)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+-TITLE-+
| BODY  |
```

Use cases: receipt, alert notice, invoice summary

---

## 0x0117 — Newsletter columns

**Slug:** `qmail-newsletter` · **Category:** email · **Mobile layout:** 791

Newsletter: header brand, 2 content columns, footer unsubscribe.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | image, text, nav |
| 1 | main | 0,0 | 50 | False | text, image |
| 2 | main | 1,0 | 50 | False | text, image, list |
| 3 | footer | — | — | False | text, nav |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+--BRAND--+
| A  | B  |
+-UNSUB---+
```

Use cases: email newsletter, digest

---

## 0x0118 — Main with center modal overlay

**Slug:** `modal-center` · **Category:** overlay · **Mobile layout:** 792

Full-page main (dimmed) + overlay pane for modal/dialog. Overlay indexes last.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | main | 0,0 | — | False | text, image |
| 1 | overlay | — | 50 | False | text, list, image |

### Nav

- Placement: **none** (pane index None)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
[ MAIN background ]
   +--MODAL--+
```

Use cases: confirm dialog, soft paywall, feature spotlight

---

## 0x0119 — App shell with modal overlay

**Slug:** `modal-over-app` · **Category:** overlay · **Mobile layout:** 793

Header+main shell with modal overlay pane.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav |
| 1 | main | 0,0 | — | False | text, table |
| 2 | overlay | — | 40 | False | text, list |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+HEADER+
| MAIN | +MODAL+
```

Use cases: in-app dialog

---

## 0x011A — Alert header + main

**Slug:** `alert-banner-main` · **Category:** email · **Mobile layout:** 794

Thin alert/disclaimer header band + body. Use layer disclaimer styles on header.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | False | text |
| 1 | main | 0,0 | — | False | text, table, list |
| 2 | footer | — | — | False | text |

### Nav

- Placement: **none** (pane index None)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+-ALERT--+
|  BODY  |
+-FOOT---+
```

Use cases: legal notice, outage banner

---

## 0x011B — Pricing three tiers

**Slug:** `pricing-3` · **Category:** landing · **Mobile layout:** 795

Header, three pricing columns, footer CTA strip.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav, text |
| 1 | main | 0,0 | — | False | text, list, table |
| 2 | main | 1,0 | — | False | text, list, table |
| 3 | main | 2,0 | — | False | text, list, table |
| 4 | footer | — | — | False | text, nav |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+---HEADER----+
| $ | $$ | $$$|
+---FOOTER----+
```

Use cases: pricing page, plans

---

## 0x011C — Contact form split

**Slug:** `contact-split` · **Category:** landing · **Mobile layout:** 796

Left info, right form (two main cols), header nav.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav |
| 1 | main | 0,0 | — | False | text, list, image |
| 2 | main | 1,0 | — | False | text, list |
| 3 | footer | — | — | False | text |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+--HEADER--+
|INFO| FORM|
+--FOOTER--+
```

Use cases: contact page, support request

---

## 0x011D — Inbox list + detail

**Slug:** `inbox-list-detail` · **Category:** app · **Mobile layout:** 797

Header, left list pane, main detail pane.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav, text |
| 1 | left | — | 32 | False | list, text |
| 2 | main | 0,0 | 68 | False | text, image, table |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: hamburger_header
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+--HEADER--+
|LIST| DETAIL|
```

Use cases: mail reader, ticket detail, chat list

---

## 0x011E — Timeline / feed single column

**Slug:** `timeline-single` · **Category:** social · **Mobile layout:** 798

Header + single scrolling main feed.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav, text |
| 1 | main | 0,0 | — | False | text, image, list |
| 2 | footer | — | — | False | nav, text |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: bottom_tabs
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+-TOP NAV-+
|  FEED   |
+-TABS?---+
```

Use cases: activity feed, microblog

---

## 0x011F — Settings: nav + panel

**Slug:** `settings-nav-main` · **Category:** app · **Mobile layout:** 799

Left settings sections, main settings form.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | False | text, nav |
| 1 | left | — | 28 | True | nav, list |
| 2 | main | 0,0 | — | False | text, table, list |

### Nav

- Placement: **left** (pane index 1)
- Orientation: vertical
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: drawer_left
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+-HEADER-+
|NAV| FORM|
```

Use cases: account settings, preferences

---

## 0x0120 — Invoice / formal document

**Slug:** `invoice-document` · **Category:** document · **Mobile layout:** 800

Header letterhead, main tables/text, footer totals/legal.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | False | text, image |
| 1 | main | 0,0 | — | False | text, table, list |
| 2 | footer | — | — | False | text, table |

### Nav

- Placement: **none** (pane index None)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+-LETTERHEAD-+
|  INVOICE   |
+-TOTALS/LEGAL+
```

Use cases: invoice, contract summary, statement

---

## 0x0121 — Two-product comparison

**Slug:** `compare-two` · **Category:** landing · **Mobile layout:** 801

Header, two equal columns for A vs B, footer.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav, text |
| 1 | main | 0,0 | — | False | text, list, table, image |
| 2 | main | 1,0 | — | False | text, list, table, image |
| 3 | footer | — | — | False | text |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+--HEADER--+
|  A  |  B  |
+--FOOTER--+
```

Use cases: A/B features, plan compare

---

## 0x0122 — Holy grail (H L M R F)

**Slug:** `holy-grail` · **Category:** classic · **Mobile layout:** 802

Classic holy-grail layout matching pane order rule exactly.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav |
| 1 | left | — | 20 | False | nav, list |
| 2 | main | 0,0 | 60 | False | text, image, table |
| 3 | right | — | 20 | False | list, text |
| 4 | footer | — | — | False | text |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+----HEADER-----+
| L | MAIN | R |
+----FOOTER-----+
```

Use cases: portal home, content site

---

## 0x0123 — Holy grail full-height side rails

**Slug:** `holy-grail-tall-sides` · **Category:** classic · **Mobile layout:** 803

Left and right rails extend full height; header/footer in center column.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav |
| 1 | left | — | 18 | False | nav, list |
| 2 | main | 0,0 | — | False | text, image |
| 3 | right | — | 18 | False | list, text |
| 4 | footer | — | — | False | text |

### Nav

- Placement: **left** (pane index 1)
- Orientation: vertical
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: drawer_left
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
L | HEADER | R
L | MAIN   | R
L | FOOTER | R
```

Use cases: portal, workspace

---

## 0x0124 — Top navigation + main

**Slug:** `top-nav-main` · **Category:** classic · **Mobile layout:** 804

Simple site: header nav and main only.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav, image, text |
| 1 | main | 0,0 | — | False | text, image, table, list |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+--NAV--+
| MAIN  |
```

Use cases: brochure, simple site, qweb

---

## 0x0125 — Bottom navigation shell

**Slug:** `bottom-nav-shell` · **Category:** app · **Mobile layout:** 805

Main content with footer as primary nav host (mobile-app style also on desktop).

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | main | 0,0 | — | False | text, image, list, table |
| 1 | footer | — | — | True | nav |

### Nav

- Placement: **footer** (pane index 1)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: bottom_tabs
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
|  MAIN  |
+-TABS---+
```

Use cases: mobile app shell, tabbed app

---

## 0x0126 — Media player + sidebar

**Slug:** `media-watch` · **Category:** media · **Mobile layout:** 806

Header, wide main (player), right related list.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav, text |
| 1 | main | 0,0 | 70 | False | image, text |
| 2 | right | — | 30 | False | list, image, text |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+--HEADER--+
|PLAYER|REL|
```

Use cases: video watch, course lesson

---

## 0x0127 — Kanban three columns

**Slug:** `kanban-3` · **Category:** app · **Mobile layout:** 807

Header toolbar + three equal board columns.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav, text |
| 1 | main | 0,0 | — | False | list, text |
| 2 | main | 1,0 | — | False | list, text |
| 3 | main | 2,0 | — | False | list, text |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+--TOOLBAR--+
|TO DO|DOING|DONE|
```

Use cases: task board, pipeline

---

## 0x0128 — Report cover page

**Slug:** `report-cover` · **Category:** document · **Mobile layout:** 808

Centered cover: large main only with generous padding (title page).

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | main | 0,0 | — | False | text, image |

### Nav

- Placement: **none** (pane index None)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+------------+
|   TITLE    |
|   PAGE     |
+------------+
```

Use cases: cover, title page

---

## 0x0129 — Report body with side notes

**Slug:** `report-body` · **Category:** document · **Mobile layout:** 809

Header running title, main body, right notes/figures, footer page meta.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | False | text |
| 1 | main | 0,0 | 72 | False | text, table, image |
| 2 | right | — | 28 | False | text, image, list |
| 3 | footer | — | — | False | text |

### Nav

- Placement: **none** (pane index None)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+-running-title-+
| BODY | NOTES |
+-page-----------+
```

Use cases: annual report, whitepaper

---

## 0x012A — Centered auth card

**Slug:** `auth-card` · **Category:** landing · **Mobile layout:** 810

Full main background with overlay card for sign-in (overlay last).

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | main | 0,0 | — | False | image, text |
| 1 | overlay | — | 36 | False | text, list |

### Nav

- Placement: **none** (pane index None)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
[ background ]
   +AUTH CARD+
```

Use cases: login, register, reset password

---

## 0x012B — Map / canvas + side panel

**Slug:** `map-content` · **Category:** app · **Mobile layout:** 811

Header, main canvas, right tools/details.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav, text |
| 1 | main | 0,0 | 72 | False | image, text |
| 2 | right | — | 28 | False | list, text, table |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+--HEADER--+
|MAP | TOOLS|
```

Use cases: map app, canvas editor

---

## 0x012C — Multi-step wizard

**Slug:** `wizard-steps` · **Category:** app · **Mobile layout:** 812

Header steps indicator, main step body, footer actions.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | False | nav, text |
| 1 | main | 0,0 | — | False | text, list, table, image |
| 2 | footer | — | — | False | text, nav |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+-STEPS-+
| BODY  |
+-ACTIONS+
```

Use cases: checkout steps, setup wizard

---

## 0x012D — Empty state centered

**Slug:** `empty-state` · **Category:** app · **Mobile layout:** 813

Single main with large padding for empty/error states.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | main | 0,0 | — | False | text, image, list |

### Nav

- Placement: **none** (pane index None)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+--------------+
|  EMPTY/ERROR |
+--------------+
```

Use cases: no results, 404-like, inbox zero

---

## 0x012E — QWeb marketing full chrome

**Slug:** `qweb-marketing-full` · **Category:** qweb · **Mobile layout:** 814

Full marketing page: header nav, left promo, main, right CTA, footer.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav, image, text |
| 1 | left | — | 20 | False | image, text |
| 2 | main | 0,0 | 55 | False | text, image, list |
| 3 | right | — | 25 | False | text, list |
| 4 | footer | — | — | False | nav, text |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+------HEADER-------+
| L | MAIN | CTA  |
+------FOOTER-------+
```

Use cases: campaign landing, product marketing

---

## 0x012F — Long-form legal

**Slug:** `legal-longform` · **Category:** document · **Mobile layout:** 815

Header title, main terms, footer acceptance band.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | False | text |
| 1 | main | 0,0 | — | False | text, list, table |
| 2 | footer | — | — | False | text, list |

### Nav

- Placement: **none** (pane index None)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+-TITLE-+
| TERMS |
+-ACCEPT+
```

Use cases: terms of service, privacy policy

---

## 0x0130 — Dual list chooser

**Slug:** `dual-list` · **Category:** app · **Mobile layout:** 816

Header, two main columns (available / selected).

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | False | text, nav |
| 1 | main | 0,0 | — | False | list, text |
| 2 | main | 1,0 | — | False | list, text |
| 3 | footer | — | — | False | text |

### Nav

- Placement: **none** (pane index None)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+-HEADER-+
| A  | B  |
+-FOOTER-+
```

Use cases: permission picker, multi-select lists

---

## 0x0131 — Status strip four KPIs

**Slug:** `status-1x4` · **Category:** dashboard · **Mobile layout:** 817

Header + one row of four main KPI cells + optional footer.

### Pane index table

| Index | Role | Grid (col,row) | Width % | Nav host | Recommended content |
|------:|------|----------------|---------|----------|---------------------|
| 0 | header | — | — | True | nav, text |
| 1 | main | 0,0 | — | False | text, table |
| 2 | main | 1,0 | — | False | text, table |
| 3 | main | 2,0 | — | False | text, table |
| 4 | main | 3,0 | — | False | text, table |
| 5 | footer | — | — | False | text |

### Nav

- Placement: **header** (pane index 0)
- Orientation: horizontal
- ITEM_BLOCK type: 2 (nav)
- Mobile collapse: stack
- Text stream: ITEM_BLOCK type=2 style_index in the nav host pane; items separated by US (0x1F); each item typically LINK_START…LINK_END.

```
+--HEADER--+
|K|K|K|K|
+--FOOTER--+
```

Use cases: ops dashboard, executive strip

---