# Page layouts

> Plainkit 0.28.0. Generated by scripts/build-skills.mjs from core/layouts and the element API. Do not edit: change the source and run the generator.

Page anatomies: the skeleton of a kind of page, as markup. Put the markup inside your page frame and replace the text and data.

## list: List page

A search page: crumbs and actions, a toolbar and a grid whose rows navigate to a record page.

Built from: Page header, Breadcrumb, Toolbar, Button, Table, Badge.

On a phone: Toolbar actions take their own row; the grid turns rows into cards with the first column as identity.

Elements used: `pk-badge` `pk-breadcrumb` `pk-button` `pk-page-header` `pk-table` `pk-toolbar`.

```html
<pk-page-header heading="Products" level="1"><pk-breadcrumb slot="breadcrumb"><a href="#">Home</a><span aria-current="page">Products</span></pk-breadcrumb><pk-button slot="actions">Add product</pk-button></pk-page-header>
<pk-table label="Products" hover clickable cards columns='[{"key":"sku","label":"SKU"},{"key":"title","label":"Title"},{"key":"status","label":"Status"}]' rows='[{"id":1,"sku":"AC-1001","title":"Widget one","status":"Active"},{"id":2,"sku":"AC-1002","title":"Widget two","status":"Draft"}]'>
<pk-toolbar slot="toolbar" heading="Products"><pk-button slot="actions" size="mini" variant="ghost">Export</pk-button></pk-toolbar>
<code slot="cell-1-sku">AC-1001</code><code slot="cell-2-sku">AC-1002</code>
<pk-badge slot="cell-1-status" variant="ok">Active</pk-badge><pk-badge slot="cell-2-status" variant="muted">Draft</pk-badge>
</pk-table>
```

## record: Record page

One record: chips and actions under the top bar, a tab strip and read-only fields beside editable ones.

Built from: Page header (record), Badge, Tabs, Card, Field list, Field, Alert, Timeline.

On a phone: Header actions wrap; the tab strip scrolls sideways; FieldList stacks label over value.

Elements used: `pk-alert` `pk-badge` `pk-button` `pk-card` `pk-field` `pk-field-list` `pk-input` `pk-page-header` `pk-stack` `pk-tab` `pk-tab-panel` `pk-tabs` `pk-timeline` `pk-timeline-item`.

```html
<pk-page-header variant="record"><pk-badge variant="ok">Received</pk-badge><pk-button slot="actions" size="mini" variant="ghost">Print</pk-button></pk-page-header>
<pk-tabs overflow="scroll" value="details"><pk-tab value="details">Details</pk-tab><pk-tab value="lines" count="3">Lines</pk-tab><pk-tab value="history">History</pk-tab>
<pk-tab-panel value="details"><pk-card heading="Vendor"><pk-stack><pk-field-list><dt>Vendor</dt><dd>Acme Supply</dd><dt>Ordered</dt><dd>Sep 12</dd></pk-field-list><pk-field label="Notes"><pk-input value="Ship together"></pk-input></pk-field></pk-stack></pk-card></pk-tab-panel>
<pk-tab-panel value="lines"><pk-card heading="Lines"><p>Three lines on this order.</p></pk-card></pk-tab-panel>
<pk-tab-panel value="history"><pk-card heading="History"><pk-timeline label="History"><pk-timeline-item heading="Received" time="Sep 18" status="done">All three lines checked in.</pk-timeline-item><pk-timeline-item heading="Shipped by vendor" time="Sep 15" status="done"></pk-timeline-item><pk-timeline-item heading="Approved" time="Sep 12" status="done"></pk-timeline-item><pk-timeline-item heading="Created" time="Sep 12" status="done"></pk-timeline-item></pk-timeline></pk-card></pk-tab-panel>
</pk-tabs>
<pk-alert kind="info">Receiving this PO creates ledger entries.</pk-alert>
```

## setup: Setup / CRUD page

A short list of small records with an add form above it.

Built from: Card, Field row, Field, Checkbox, Button, Table.

On a phone: Form rows stack; the table scrolls inside its own wrapper.

Elements used: `pk-button` `pk-card` `pk-checkbox` `pk-field` `pk-field-row` `pk-input` `pk-stack` `pk-table`.

```html
<pk-card heading="Add category"><pk-stack><pk-field-row><pk-field label="Name"><pk-input value="Books"></pk-input></pk-field></pk-field-row><pk-checkbox checked>Active</pk-checkbox><div><pk-button>Add</pk-button></div></pk-stack></pk-card>
<pk-table label="Categories" cards columns='[{"key":"name","label":"Name"},{"key":"products","label":"Products","type":"number"}]' rows='[{"id":1,"name":"Books","products":42},{"id":2,"name":"Cards","products":17}]'></pk-table>
```

## tool: Tool page

A one-shot operation: explain it, take an input, show the outcome.

Built from: Card, Dropzone, Button, Spinner, Alert.

On a phone: Everything is a single column already; the upload button keeps its normal size.

Elements used: `pk-alert` `pk-button` `pk-card` `pk-cluster` `pk-dropzone` `pk-spinner` `pk-text`.

```html
<pk-card><pk-cluster align="end"><pk-dropzone label="Feed file" accept=".csv,text/csv">Drop a file here or click to choose</pk-dropzone><pk-button>Import</pk-button></pk-cluster></pk-card>
<pk-cluster><pk-spinner label="Reading file"></pk-spinner><pk-text inline tone="muted" role="status">Reading file…</pk-text></pk-cluster>
<pk-alert kind="warning">Two rows have no SKU.<pk-button slot="action" size="mini">Review rows</pk-button></pk-alert>
```

## wizard: Wizard

A guided create flow: numbered steps, one card at a time, Back and Next.

Built from: Stepper, Card, Field, Toolbar, Button.

On a phone: The step strip scrolls; Back and Next share the last row.

Elements used: `pk-button` `pk-card` `pk-field` `pk-input` `pk-stack` `pk-step` `pk-stepper` `pk-toolbar`.

```html
<pk-stepper label="Create product" current="1" clickable><pk-step heading="Basics"></pk-step><pk-step heading="Pricing"></pk-step><pk-step heading="Review"></pk-step></pk-stepper>
<pk-card heading="Pricing"><pk-stack><pk-field label="Price" required><pk-input value="19.99"></pk-input></pk-field><pk-field label="Cost"><pk-input value="9.50"></pk-input></pk-field></pk-stack></pk-card>
<pk-toolbar><pk-button slot="actions" variant="ghost">Back</pk-button><pk-button slot="actions">Next</pk-button></pk-toolbar>
```

## record-detail: Record detail (sidebar)

One record's body plus a sticky sidebar of summary cards, collapsing to one column below the container's own width, not the viewport.

Built from: Detail layout, Page header (record), Badge, Card, Field list.

On a phone: Below the container's 48rem the sidebar stacks under the main content, no longer sticky.

Elements used: `pk-badge` `pk-card` `pk-detail-layout` `pk-field-list` `pk-page-header`.

```html
<pk-detail-layout><pk-page-header heading="Order 1042" variant="record"><pk-badge variant="ok" slot="actions">Received</pk-badge></pk-page-header><pk-card heading="Lines"><pk-field-list><dt>Vendor</dt><dd>Acme Supply</dd><dt>Ordered</dt><dd>Sep 12</dd><dt>Lines</dt><dd>3</dd></pk-field-list></pk-card><div slot="sidebar"><pk-card heading="Status"><pk-badge variant="ok">Received</pk-badge></pk-card><pk-card heading="Totals"><pk-field-list><dt>Subtotal</dt><dd>$412.00</dd><dt>Tax</dt><dd>$33.96</dd></pk-field-list></pk-card></div></pk-detail-layout>
```