Board

Kanban board layout: a horizontally scrolling flex row of fixed-width columns, each with a header and a cards well. Use it as the main work view of a project; fill .board-column-cards with .issue-card elements.

Root: .board on <div>

Example

To do 4

Fix login loop

<div class="board"><div class="board-column"><div class="board-column-header">To do <span class="badge">4</span></div><div class="board-column-cards"><div class="issue-card"><div class="issue-card-summary">Fix login loop</div></div></div></div></div>

Authoring tags — <lz-board-column>

To do 2

Set up CI pipeline for nightly builds

LOZ-12 3JC

LOZ-14 DK

Authoring source

<div class="board">
  <lz-board-column title="To do" count="2">
    <lz-issue-card type="task" key="LOZ-12">
      Set up CI pipeline for nightly builds
      <lz-badge slot="meta">3</lz-badge>
      <lz-avatar slot="meta" size="sm">JC</lz-avatar>
    </lz-issue-card>
    <lz-issue-card type="bug" key="LOZ-14">
      Login page throws redirect loop on expired session
      <lz-avatar slot="meta" size="sm">DK</lz-avatar>
    </lz-issue-card>
  </lz-board-column>
</div>

Expands to

<div class="board">
  <div class="board-column" data-lz="board-column" data-lz-version="0.1.0">
  <div class="board-column-header">To do <span class="badge">2</span></div>
  <div class="board-column-cards">
    <div class="issue-card" data-lz="issue-card" data-lz-version="0.1.0">
  <div class="issue-card-summary">
      Set up CI pipeline for nightly builds
      
      
    </div>
  <div class="issue-card-meta">
    <span class="issue-type issue-type-task" role="img" aria-label="task"></span>
    <span class="issue-key">LOZ-12</span>
    <span class="badge" data-lz="badge" data-lz-version="0.1.0">3</span><span class="avatar avatar-sm" data-lz="avatar" data-lz-version="0.1.0">JC</span>
  </div>
</div>
    <div class="issue-card" data-lz="issue-card" data-lz-version="0.1.0">
  <div class="issue-card-summary">
      Login page throws redirect loop on expired session
      
    </div>
  <div class="issue-card-meta">
    <span class="issue-type issue-type-bug" role="img" aria-label="bug"></span>
    <span class="issue-key">LOZ-14</span>
    <span class="avatar avatar-sm" data-lz="avatar" data-lz-version="0.1.0">DK</span>
  </div>
</div>
  </div>
</div>
</div>

Authoring tags are macro-expanded to the canonical HTML above at build time (Vite plugin or lz-expand CLI) — the shipped artifact has no runtime.

Contract

Structure

Selector	Required	Description
`.board-column`	required	Direct children of .board; fixed width, sunken background. The board is a flex row of these.
`.board-column > .board-column-header`	optional	Column title row (flex; truncates). Commonly ends with a <span class="badge"> count.
`.board-column > .board-column-cards`	optional	Padded well holding the stack of .issue-card elements; has a min-height so empty columns remain drop targets.

Accessibility

Column headers are plain divs — consider making them real headings (or adding role/aria-level) so screen-reader users can navigate columns. If cards are draggable, provide a keyboard alternative for moving them between columns.

Nesting

Allowed in:

main content area of the app shell

Never inside (or containing):

.board