# Board
Columns of cards, side by side on a wide screen in a frame that scrolls sideways, and stacked on a phone.
Block: `smbk-board`. Status: experimental. Figma: the Figma file, https://www.figma.com/community/file/1688324308358870630. Desktop and mobile: differ by presentation only.
## Options
| Axis | Values | Default | Meaning |
|---|---|---|---|
Parts: `smbk-board__columns`, `smbk-board__scroll-hint`
## Markup
```html
```
## React
```tsx
import { Board } from './design-system/components/board/board.js';
import { BoardColumn, BoardGroup } from './design-system/components/board-column/board-column.js';
import { CapacityMeter } from './design-system/components/capacity-meter/capacity-meter.js';
import { Button } from './design-system/components/button/button.js';
import { Card, CardHeader, CardFooter } from './design-system/components/card/card.js';
import { Badge } from './design-system/components/badge/badge.js';
import { Avatar } from './design-system/components/avatar/avatar.js';
} action={}>
} footer={Design} end={} />}>Check the new color ladder against the contrast pairs.
} footer={Copy} end={LP} />} />
} footer={Bug} end={AS} />} />
} action={}>
} footer={Docs} end={LP} />}>One line per change, in plain words.
} footer={Docs} end={} />} />
} action={}>
} footer={Feature} end={AS} />} />
```
## Stylesheet
```css
/* smbk-board — Board. Figma "Board" 7118:1603 (Platform: Desktop, Mobile; the layout switch here).
* Columns of cards side by side on a wide screen, the large inline gap apart, in a frame that scrolls
* sideways when they run past it; in a narrow space they stack, one under another at full width, the
* large stack gap apart, and nothing scrolls sideways. Where the browser hides its own scrollbar until the
* frame scrolls (a phone, a trackpad), a thin bar along the frame's foot shows that there is more
* sideways, drawn with the table's track and thumb. */
.smbk-board {
box-sizing: border-box;
position: relative;
display: block;
width: 100%;
overflow-x: auto;
/* The system's scrollbar: thin, in the subtle border color, on a clear track. */
scrollbar-width: thin;
scrollbar-color: var(--smbk-color-border-subtle) transparent;
}
/* A frame that scrolls is a region the keyboard reaches: its ring is drawn inside its edge, which clips. */
.smbk-board:focus-visible {
outline: var(--smbk-focus-ring-width) solid var(--smbk-color-border-focus);
outline-offset: calc(-1 * var(--smbk-focus-ring-width));
}
.smbk-board__columns {
display: flex;
align-items: flex-start;
gap: var(--smbk-space-inline-lg);
width: max-content;
min-width: 100%;
}
/* ---- the scroll hint (the shared script marks the frame `data-scroll-hint`) ---- */
.smbk-board__scroll-hint {
display: none;
}
.smbk-board[data-scroll-hint] .smbk-board__scroll-hint {
position: sticky;
left: 0;
display: block;
padding: var(--smbk-space-inset-xs) var(--smbk-space-inset-sm);
pointer-events: none;
}
/* While the system's scrollbar shows over the frame (scrollbar.ts), in the same strip, the hint's bar fades out of
its way (its fade is the table's). */
.smbk-board[data-scroll-hint]:has(> .smbk-scrollbar[data-shown]) .smbk-table__scroll-track {
opacity: 0;
}
/* ---- the narrow form: the columns stack and the frame no longer scrolls sideways ---- */
@container style(--smbk-layout: narrow) {
.smbk-board {
overflow-x: visible;
}
.smbk-board__columns {
flex-direction: column;
align-items: stretch;
gap: var(--smbk-space-stack-lg);
width: auto;
}
.smbk-board__scroll-hint {
display: none;
}
}
```
## Tokens it reads
```json
{
"color": {
"border": {
"subtle": {
"$type": "color",
"$value": "{{color.grey.300}}",
"$description": "Dividers and quiet edges."
},
"focus": {
"$type": "color",
"$value": "{{color.red.600}}",
"$description": "Keyboard focus ring on controls."
}
}
},
"focus": {
"ring": {
"width": {
"$type": "dimension",
"$value": "{{border-width.2}}",
"$description": "Thickness of the focus ring."
}
}
},
"space": {
"inline": {
"lg": {
"$type": "dimension",
"$value": "{{space.12}}",
"$description": "Gap between things side by side, large."
}
},
"inset": {
"xs": {
"$type": "dimension",
"$value": "{{space.4}}",
"$description": "Padding inside a component, extra small."
},
"sm": {
"$type": "dimension",
"$value": "{{space.6}}",
"$description": "Padding inside a component, small."
}
},
"stack": {
"lg": {
"$type": "dimension",
"$value": "{{space.16}}",
"$description": "Gap between things stacked one above another, large."
}
}
}
}
```
## Purpose
Shows work in lanes: one column per project, person or stage, each with its cards. On a wide screen the lanes sit side by side, so the reader can compare them; on a phone they stack, one under another.
## Anatomy
- The block, a frame that scrolls sideways when its columns run past it.
- The columns part, the row of board columns, the large inline gap apart.
- The scroll hint part, a thin bar along the frame's foot that shows there is more sideways and how much is in view. It shows where the browser's own scrollbar takes no room, such as on a phone or a trackpad, and wherever the system's scrollbar is drawn over the frame; it fades while that bar shows, in the same strip.
## When to use
- For a few lanes of comparable work that a reader scans side by side.
- For a dashboard of projects, each with its items grouped by where they stand.
## When not to use
- For one lane. Use a [board column](board-column.md) alone.
- For many items with many details each. Use a [table](table.md).
## Behavior
On a wide screen the columns sit side by side at the large column width. When they need more room than the frame has, the frame scrolls sideways inside itself, so the page never does. In a narrow space the columns stack at full width, the large stack gap apart, and nothing scrolls sideways. Put `data-layout="narrow"` or `"wide"` on an element around the board to choose either form.
Moving cards between columns by dragging is not part of the board.
## Accessibility
### What it does for you
- While the columns run past the frame, the frame is a region named by the board's label and a stop for the Tab key, so the arrow keys can scroll it sideways. It shows the focus ring inside its edge. When everything fits, it is neither.
- The columns are read in the order they come in the page, left to right on a wide screen and top to bottom on a phone.
- Each column is a region of its own, named by its title.
### What you must do
- Give the board an `aria-label` that says what it shows, such as "Agents by project".
### How to test
- On a wide screen with columns past the frame, Tab to the frame: the focus ring shows inside its edge, and the arrow keys scroll it sideways.
- With a screen reader, the frame and each column are found as regions by their names, and the columns are read in page order.
- With text at 200% and the page 320 pixels wide, the columns stack and nothing scrolls sideways.
- In a forced-color mode, the focus ring on the frame stays visible.
### Keyboard
| Key | What it does |
|---|---|
| Tab | Moves focus to the frame while the columns run past it, then into the columns. |
| Left Arrow or Right Arrow | Scrolls the frame sideways while it has focus. |
## Usage rules
### Do
- Keep to a few columns, each named.
- Put the column that needs the reader first, first.
### Don't
- Hide columns on a phone; they stack instead.
- Nest a board in a board column.