> For the complete documentation index, see [llms.txt](https://docs.notionapps.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.notionapps.com/how-to-guides/board-layouts-and-details-polish.md).

# Board Layouts and Details Polish

## Board Layouts and Details Polish

### Board Layouts and Details Polish

Use **Board** list layouts with drag-and-drop Status/Select updates, plus Details polish components: **Metric Card**, **Select badges**, **Media Gallery**, **Status Timeline**, and **Unique ID Chip**.

{% hint style="info" %}
**Scope**\
This is the overview for the Board + Details layout pack released with the [20 Jul 2026 Release](https://docs.notionapps.com/release-notes/20-jul-2026-release). Each capability also has its own how-to guide (linked below). Existing List / Grid / Calendar screens are unchanged until you opt into Board or add the new components.
{% endhint %}

***

#### What’s included

| Capability              | Where it lives                 | One-line outcome                  | Deep dive                                                                       |
| ----------------------- | ------------------------------ | --------------------------------- | ------------------------------------------------------------------------------- |
| **Board view**          | List → Appearance → Board      | Kanban columns from grouping      | [Board List View](https://docs.notionapps.com/guides/board-list-view)           |
| **Board drag and drop** | Board + Status/Select grouping | Drag card → updates Notion        | Same guide                                                                      |
| **Metric Card**         | Details (view comp)            | Large number / formula / rollup   | [Metric Card](https://docs.notionapps.com/guides/metric-card)                   |
| **Select badges**       | List tags + Details chips      | Notion Select colors              | [Select Option Badges](https://docs.notionapps.com/guides/select-option-badges) |
| **Media Gallery**       | Details (view comp)            | Files thumbnails + lightbox       | [Media Gallery](https://docs.notionapps.com/guides/media-gallery)               |
| **Status Timeline**     | Details (view comp)            | Horizontal Status lifecycle       | [Status Timeline](https://docs.notionapps.com/guides/status-timeline)           |
| **Unique ID Chip**      | Details (view comp)            | Monospace Unique ID (e.g. `RST1`) | [Unique ID Chip](https://docs.notionapps.com/guides/unique-id-chip)             |

```
Board columns from Status.
Drag to update Notion.
Details show metrics, media, timeline, and IDs clearly.
```

![Builder Board with Status columns](https://iili.io/Cwe38ZB.png)

![Details with Metric Card, badges, gallery, timeline, and Unique ID](https://iili.io/Cwe3bnI.png)

***

#### Before you start

* A Notion database with Status and/or Select, plus optional number/files/unique\_id fields
* List + Details screens for that database
* Ability to **Reload Data** and **Publish**

{% hint style="success" %}
**Suggested order**

1. Board + grouping 2) Board drag 3) Details comps (Metric → Timeline → Gallery → Unique ID → badges check) 4) Publish once.
   {% endhint %}

***

#### Path A — Ship a Board list

**A1. Set view type to Board**

1. Open the List screen.
2. Set **View type** to **Board**.
3. Enable **Grouping** on Status or Select.
4. Confirm columns in preview.

![Board ready in builder](https://iili.io/Cwe3zIp.png)

**A2. Turn on drag writes**

1. Ensure multi-row update / field editability allows writing the grouping field.
2. Drag a card between columns in preview.
3. Publish and drag again in the live app; confirm Notion.

![Board drag in builder](https://iili.io/Cwe3UCP.png)

![Published Board](https://iili.io/Cwe3gG1.png)

Full steps: [Board List View](https://docs.notionapps.com/guides/board-list-view).

***

#### Path B — Polish Details

Add any combination of:

1. **Metric Card** → number / formula / rollup ([guide](https://docs.notionapps.com/guides/metric-card))
2. **Status Timeline** → Status field ([guide](https://docs.notionapps.com/guides/status-timeline))
3. **Media Gallery** → files field ([guide](https://docs.notionapps.com/guides/media-gallery))
4. **Unique ID Chip** → unique\_id field ([guide](https://docs.notionapps.com/guides/unique-id-chip))
5. Confirm **Select badges** / Status chips use Notion colors ([guide](https://docs.notionapps.com/guides/select-option-badges))

![Details components layout](https://iili.io/Cwe3QuR.png)

***

#### End-to-end checklist

**Board**

* [ ] View type = Board
* [ ] Grouping = Status or Select
* [ ] Columns match Notion options after Reload Data
* [ ] Drag updates Notion (when intended)
* [ ] Tap opens Details

**Details polish**

* [ ] Metric Card shows the KPI you expect
* [ ] Status Timeline highlights the active status
* [ ] Media Gallery shows thumbs for records with files
* [ ] Unique ID Chip matches Notion (e.g. `RST1`)
* [ ] Select / Priority badges use Notion colors

**Ship**

* [ ] Published after changes
* [ ] Hard-refresh live app if an old build was cached

***

#### What did not change

| Area                   | Behavior                                                          |
| ---------------------- | ----------------------------------------------------------------- |
| List / Grid / Calendar | Unchanged until you switch view type                              |
| Reference-list comps   | Stay List/Grid (no Board)                                         |
| Automation Work Queue  | Unchanged                                                         |
| File upload            | Still Create/Update file/image comps — Media Gallery is view-only |

***

#### Troubleshooting (quick)

| Symptom              | Fix                                                              |
| -------------------- | ---------------------------------------------------------------- |
| Board has no columns | Enable grouping on Status/Select; Reload Data                    |
| Drag does not save   | Allow writable Status/Select + multi-row update; see Board guide |
| Details comps empty  | Bind correct field types; ensure sample record has values        |
| Colors wrong         | Reload Data after Notion option color changes                    |

***

#### Screenshot index (for GitBook upload)

| File                                                     | Use                              |
| -------------------------------------------------------- | -------------------------------- |
| `assets/wave-c-layouts-guide/01-builder-ready.png`       | Builder before/with List context |
| `assets/wave-c-layouts-guide/02-builder-board.png`       | Board columns in builder         |
| `assets/wave-c-layouts-guide/03-builder-board-dnd.png`   | Board drag in builder            |
| `assets/wave-c-layouts-guide/04-enduser-board.png`       | Published Board                  |
| `assets/wave-c-layouts-guide/05-enduser-board-dnd.png`   | Published Board after drag       |
| `assets/wave-c-layouts-guide/06-details-comps.png`       | Details comps layout             |
| `assets/wave-c-layouts-guide/07-details-wave-c-pass.png` | Details polish pass              |

Optional walkthrough video (e2e capture): `assets/wave-c-layouts-e2e/wave-c-layouts.mp4`

***

#### Related reading

* [Board List View](https://docs.notionapps.com/guides/board-list-view)
* [Metric Card](https://docs.notionapps.com/guides/metric-card)
* [Select Option Badges](https://docs.notionapps.com/guides/select-option-badges)
* [Media Gallery](https://docs.notionapps.com/guides/media-gallery)
* [Status Timeline](https://docs.notionapps.com/guides/status-timeline)
* [Unique ID Chip](https://docs.notionapps.com/guides/unique-id-chip)
* [Status and People Field Fidelity](https://docs.notionapps.com/guides/status-and-people-field-fidelity)
* [20 Jul 2026 Release](https://docs.notionapps.com/release-notes/20-jul-2026-release)

## Annotated builder screenshots

![Annotated builder screenshot: View Type](https://4233028229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5ZqDXcVVffWUqEIZVhmn%2Fuploads%2FvVn2ybnbNkh0r7OygNxK%2Fp23-1786203265-11-15-section-view-type.jpg?alt=media)

![Annotated builder screenshot: Details Logic](https://4233028229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5ZqDXcVVffWUqEIZVhmn%2Fuploads%2FE3C5DpMNx7BbUlqbZjZ2%2Fp23-1786203265-14-02-section-logic.jpg?alt=media)

![Annotated builder screenshot: Details Allow Editing](https://4233028229-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5ZqDXcVVffWUqEIZVhmn%2Fuploads%2FSQ9eAP2okKzqD0eDUaa2%2Fp23-1786203268-15-05-section-allow-editing.jpg?alt=media)

## Complete Builder Options Reference

Related screens:

* List Appearance / View Type — [List (View Items)](https://docs.notionapps.com/screens-and-components/types-of-screens/list-view-items)
* Details field layout — [Details (View One Item)](https://docs.notionapps.com/screens-and-components/types-of-screens/details-view-one-item)

#### View Type / Board polish

**What it does:** Switches list presentation and card density.\
**How to use it:** Pair Board with clear Title/Tag mappings and a Details screen for drill-in.\
**Why / recommended default:** Board for workflow status; Details for the full record.