Board

Board is a composite layout for displaying grouped items in horizontal columns — task management, staff overviews, any workflow that benefits from a column-based view. It composes existing BDS primitives (Avatar, ProgressBar) into a reusable layout pattern without introducing new visual atoms.

Use it for

• Task / project boards (To do / In progress / Done)
• Staff schedule overviews (per-shift availability)
• Pipeline views (Lead / Qualified / Proposal / Won)
• Status-based workflows where horizontal columns map to states

For row-based data, use Table. For card grids without column groupings, use CardList orientation="horizontal".

Import

import { Board, BoardColumn, BoardHeader } from '@brikdesigns/bds';

Anatomy

Three composable components:

Variants

Default

<Board>
  <BoardColumn title="Opening" count={2}>
    <BoardHeader
      name="Cassidy Moore"
      subtitle="Dental Hygienist"
      avatarSrc="/cassidy.jpg"
      progress={37}
    />
    <BoardHeader
      name="Alex Rivera"
      subtitle="Receptionist"
      progress={62}
    />
  </BoardColumn>

  <BoardColumn title="Mid-shift" count={3}>
    {/* ... */}
  </BoardColumn>

  <BoardColumn title="Closing" count={1}>
    {/* ... */}
  </BoardColumn>
</Board>

Single column

A board can render a single column for focused views.

<Board>
  <BoardColumn title="Today's roster" count={5}>
    <BoardHeader name="..." />
    <BoardHeader name="..." />
  </BoardColumn>
</Board>

Avatar fallback

BoardHeader accepts an avatarSrc prop. When omitted, Avatar falls back to initials generated from the name.

<BoardHeader name="Cassidy Moore" subtitle="Hygienist" />
{/* Avatar shows "CM" */}

<BoardHeader name="Alex Rivera" subtitle="Receptionist" avatarSrc="/alex.jpg" />
{/* Avatar shows the photo */}

Empty column

Columns gracefully handle zero items.

<BoardColumn title="Closing" count={0}>
  {/* No headers — column renders the title and an empty state */}
</BoardColumn>

Header actions

BoardColumn accepts headerAction for buttons or menus in the column header (typically an "+ Add" or overflow menu).

<BoardColumn
  title="Opening"
  count={2}
  headerAction={<IconButton icon={<PlusIcon />} label="Add to Opening" size="sm" variant="ghost" />}
>
  ...
</BoardColumn>

Children inside BoardHeader

BoardHeader accepts children for additional per-card content (badges, action buttons, task counts).

<BoardHeader name="Cassidy Moore" subtitle="Hygienist" progress={37}>
  <Badge size="sm" status="warning">Late start</Badge>
</BoardHeader>

Design decisions

• Horizontal scroll — scroll-snap-type: x proximity snaps to column boundaries on mobile and trackpad.
• Flexible columns — Each column flexes between 280px min and 400px max — responsive without media queries.
• Avatar size locked to lg (48px) per the Figma spec.
• Progress bar alignment — left-padded past the avatar width so the bar visually aligns with text, not avatar.

When not to use

• Don't use Board for tabular data. Use Table.
• Don't use Board with >5 columns. Horizontal scroll with 6+ columns becomes unusable on most screens. Split into multiple boards or switch to a list view.
• Don't use BoardHeader for non-person entities without considering the avatar's semantics. Avatar fallback uses initials of the name — fine for people, awkward for "Project Alpha."

Accessibility

• Board renders a <div role="region"> with aria-label describing the board.
• Each BoardColumn is a <section> with the title as a heading.
• BoardHeader cards are real <div>s — wrap in <a> or pass onClick to make them interactive.
• Progress bars carry aria-valuenow for screen-reader announcement.

API

Board

BoardColumn

BoardHeader

CSS Override API

.priority-column .bds-board-card {
  --bds-board-card-accent: var(--background-status-error);
}

.compact-board {
  --board-card-hover-translate-y: 0;
}

Related

• Avatar — used inside BoardHeader
• ProgressBar — used inside BoardHeader
• Table — row-based alternative
• Storybook playground