--- title: "Kanban board UI: anatomy, variants and examples | Kombai" description: "A kanban board shows work as cards in columns, one per stage, so people can see what is in progress and move items along as they go." canonical_url: https://kombai.com/glossary/kanban-board/ author: "The Kombai Team" --- # Kanban board A kanban board shows work as cards in columns, one per stage, so people can see what is in progress and move items along as they go. - Also called: board view - Platforms: Web - In the Kombai gallery: [50 web designs](https://kombai.com/gallery/web/kanban-board/) - [Alderway](https://kombai.com/gallery/inspirations/kanban-board-web-8/) (Web) - [Kestrel](https://kombai.com/gallery/inspirations/kanban-board-web-1/) (Web) - [Hollowick](https://kombai.com/gallery/inspirations/kanban-board-web-50/) (Web) ## What is a kanban board? A kanban board splits a workflow into columns, one per stage, and shows each piece of work as a card in the column it has reached. Moving a card to the next column changes its status, so the board is both a view and a control. - Column headers name the stage and count its cards. - Cards carry a title, an owner and a few tags, and open into the full item. ## When to use kanban board - **Work moves in stages.** Tasks, deals or candidates that pass through the same steps. - **Status at a glance.** People need to see what is stuck, in progress or done. - **Shared work.** A team works off one board and moves its own cards. ## When not to use one - **Many fields to compare.** If people sort by date, value or owner, use a table. - **Dates drive the work.** For deadlines and phases, use a timeline or a calendar. - **Hundreds of items.** Long columns are hard to scan. Filter first, or use a list. ## Anatomy 1. **Column**: One stage of the work 2. **Header**: Stage name and card count 3. **Card**: Title, tag and owner 4. **Move controls**: Drag, or use the arrows 5. **Add card**: Adds an item to a column 6. **States**: Card, dragging, drop target, focus ## Variants We sorted every kanban board design in the Kombai gallery and found six patterns. ### 1. Status columns The default. To do, In progress and Done, with each card holding a title, an owner and a tag or two. - [Hollowmere](https://kombai.com/gallery/inspirations/kanban-board-web-37/) (Web) - [Ashvale](https://kombai.com/gallery/inspirations/kanban-board-web-20/) (Web) - [Ferrymill](https://kombai.com/gallery/inspirations/kanban-board-web-6/) (Web) ### 2. Pipelines with totals Deal stages with a count or a summed value on every column, so people see where the money sits. - [Norwell Pipeline](https://kombai.com/gallery/inspirations/kanban-board-web-40/) (Web) - [Larkfield](https://kombai.com/gallery/inspirations/kanban-board-web-13/) (Web) - [Orrery](https://kombai.com/gallery/inspirations/kanban-board-web-12/) (Web) ### 3. Person cards Each card is a candidate, an investor or a contact, led by a name and an avatar. - [Reedline](https://kombai.com/gallery/inspirations/kanban-board-web-7/) (Web) - [Kestrel](https://kombai.com/gallery/inspirations/kanban-board-web-10/) (Web) - [Foxglen](https://kombai.com/gallery/inspirations/kanban-board-web-49/) (Web) ### 4. Note and idea boards Long text cards, like interview quotes, friction notes or content ideas, where reading the card matters more than its status. - [Cairnwell](https://kombai.com/gallery/inspirations/kanban-board-web-3/) (Web) - [Tidepool](https://kombai.com/gallery/inspirations/kanban-board-web-34/) (Web) - [Wrenmoor](https://kombai.com/gallery/inspirations/kanban-board-web-44/) (Web) ### 5. Swimlanes and grouped boards Rows that split the columns by parent task, columns grouped by deadline, and empty columns folded away. - [Quarry](https://kombai.com/gallery/inspirations/kanban-board-web-33/) (Web) - [Meridiem](https://kombai.com/gallery/inspirations/kanban-board-web-47/) (Web) - [Emberwatch](https://kombai.com/gallery/inspirations/kanban-board-web-24/) (Web) ### 6. Cards with covers An image on top of each card, for assets, designs and anything people recognize by sight. - [Kindling](https://kombai.com/gallery/inspirations/kanban-board-web-17/) (Web) - [Orrery](https://kombai.com/gallery/inspirations/kanban-board-web-2/) (Web) - [Bellrock](https://kombai.com/gallery/inspirations/kanban-board-web-23/) (Web) ## Where kanban boards show up ### Issue tracking and sprints Engineering and studio teams move issues from Backlog or To do through to Done across a cycle. - [Thistle](https://kombai.com/gallery/inspirations/kanban-board-web-46/) (Web) - [Vireo](https://kombai.com/gallery/inspirations/kanban-board-web-31/) (Web) - [Havermill](https://kombai.com/gallery/inspirations/kanban-board-web-43/) (Web) ### Content and launch planning Posts, campaigns and launches move from draft to published, with dates and channels on each card. - [Colwick](https://kombai.com/gallery/inspirations/kanban-board-web-42/) (Web) - [Quillbrook](https://kombai.com/gallery/inspirations/kanban-board-web-21/) (Web) - [Tessera](https://kombai.com/gallery/inspirations/kanban-board-web-27/) (Web) ### Feedback and research Signals, interview notes and feature ideas sorted into columns before they turn into work. - [Larkspur](https://kombai.com/gallery/inspirations/kanban-board-web-11/) (Web) - [Tidebook](https://kombai.com/gallery/inspirations/kanban-board-web-15/) (Web) - [Tanager](https://kombai.com/gallery/inspirations/kanban-board-web-30/) (Web) ## Kanban board vs similar components | | [Kanban board](https://kombai.com/glossary/kanban-board/) | [Table](https://kombai.com/glossary/table/) | [Timeline](https://kombai.com/glossary/timeline/) | |---|---|---|---| | Organizes by | Stage | Fields in columns | Time | | Main action | Moving cards to the next stage | Sorting, filtering and editing | Planning dates and phases | | Best for | Tasks, deals and hiring | Records with many fields | Roadmaps and schedules | ## Build notes - Give every drag a single-pointer alternative, like move buttons or a status menu. - Announce each move in a polite live region, like "Moved Add Apple Pay to Done." - Make each column a labelled section, with the stage name and card count in its heading. - Keep focus on the card after a keyboard move, so people can keep moving it. - Show a clear drop target while dragging, and dim the card being moved. - Put a work-in-progress limit in the column header, and flag the column when it goes over. ## FAQ ### How do you make a kanban board accessible? Dragging cannot be the only way to move a card. WCAG 2.2 asks for a single-pointer alternative, like arrow buttons or a Move to menu on each card. Announce each move in a live region, and keep focus on the card that moved. ### What is a WIP limit? A work-in-progress limit caps how many cards a column can hold, like three in In progress. When a column is full, people finish something before they pull in new work, so work stops piling up half done. ### How many columns should a kanban board have? As many as the real stages of the work, usually three to six. To do, In progress and Done is the smallest useful set. Fold away columns that sit empty most of the time. ### Kanban board or table? Use a board when the stage of each item matters most and moving items is the main action. Use a table when people sort, filter and compare many fields. Many tools in the gallery offer both as views of the same data. ## Related terms - [Table](https://kombai.com/glossary/table/) - [Card](https://kombai.com/glossary/card/) - [Timeline](https://kombai.com/glossary/timeline/) - [Calendar](https://kombai.com/glossary/calendar/) ## References - [WCAG 2.2: Understanding Dragging Movements](https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html) - [MDN: HTML Drag and Drop API](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API) - [MDN: aria-live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-live)