# Kanban board · MIAN

Columns of cards for a pipeline, sprint or sales process, counts, colour dots and card meta.

- Id: `kanban` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/kanban
- Use for: kanban board, deals pipeline, task board, sprint board, columns of cards.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `mn-kanban`: The board: scrolling columns.
- `mn-kanban-col`: A column (a <section>).
- `mn-kanban-head`: Column title (<h3>) with a count badge; mn-kanban-dot with a colour role.
- `mn-kanban-list`: The cards (<ul>).
- `mn-kanban-card`: A card. Add mn-card for the noodle’s surface.
- `mn-kanban-meta`: Footer line of a card.

## Accessibility

- Columns are sections with headings, cards are list items: the board reads as “Proposal, 3 items”.
- Moving cards needs a keyboard alternative (a “Move to…” menu) if you add drag and drop.

## Examples

### Sales pipeline

```html
<div class="mn-kanban">
  <section class="mn-kanban-col" aria-labelledby="kb-Lead">
    <h3 class="mn-kanban-head" id="kb-Lead"><span><span class="mn-kanban-dot mn-info"></span>Lead</span><span class="mn-badge mn-badge-soft mn-neutral mn-badge-sm">2</span></h3>
    <ul class="mn-kanban-list"><li class="mn-card mn-kanban-card"><strong>Halden & Co</strong><span class="mn-muted">Annual plan, 5 entities</span><div class="mn-kanban-meta"><span>€18,000</span><span class="mn-avatar mn-avatar-xs" aria-label="Owner MR" role="img">MR</span></div></li><li class="mn-card mn-kanban-card"><strong>Orbital</strong><span class="mn-muted">Annual plan, 5 entities</span><div class="mn-kanban-meta"><span>€6,400</span><span class="mn-avatar mn-avatar-xs" aria-label="Owner AP" role="img">AP</span></div></li></ul>
  </section>
  <section class="mn-kanban-col" aria-labelledby="kb-Proposal">
    <h3 class="mn-kanban-head" id="kb-Proposal"><span><span class="mn-kanban-dot mn-warning"></span>Proposal</span><span class="mn-badge mn-badge-soft mn-neutral mn-badge-sm">3</span></h3>
    <ul class="mn-kanban-list"><li class="mn-card mn-kanban-card"><strong>Kestrel</strong><span class="mn-muted">Annual plan, 5 entities</span><div class="mn-kanban-meta"><span>€42,000</span><span class="mn-avatar mn-avatar-xs" aria-label="Owner JO" role="img">JO</span></div></li><li class="mn-card mn-kanban-card"><strong>Pilot/9</strong><span class="mn-muted">Annual plan, 5 entities</span><div class="mn-kanban-meta"><span>€9,900</span><span class="mn-avatar mn-avatar-xs" aria-label="Owner RE" role="img">RE</span></div></li><li class="mn-card mn-kanban-card"><strong>Marrow</strong><span class="mn-muted">Annual plan, 5 entities</span><div class="mn-kanban-meta"><span>€12,500</span><span class="mn-avatar mn-avatar-xs" aria-label="Owner LK" role="img">LK</span></div></li></ul>
  </section>
  <section class="mn-kanban-col" aria-labelledby="kb-Won">
    <h3 class="mn-kanban-head" id="kb-Won"><span><span class="mn-kanban-dot mn-success"></span>Won</span><span class="mn-badge mn-badge-soft mn-neutral mn-badge-sm">1</span></h3>
    <ul class="mn-kanban-list"><li class="mn-card mn-kanban-card"><strong>Northwind</strong><span class="mn-muted">Annual plan, 5 entities</span><div class="mn-kanban-meta"><span>€24,000</span><span class="mn-avatar mn-avatar-xs" aria-label="Owner IS" role="img">IS</span></div></li></ul>
  </section>
</div>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/kanban/source