Kanban board
Columns of cards for a pipeline, sprint or sales process, counts, colour dots and card meta.
Sales pipeline
Lead2
- Halden & CoAnnual plan, 5 entities
- OrbitalAnnual plan, 5 entities
Proposal3
- KestrelAnnual plan, 5 entities
- Pilot/9Annual plan, 5 entities
- MarrowAnnual plan, 5 entities
Won1
- NorthwindAnnual plan, 5 entities
<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>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/kanban.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| 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.