Layouts · Task flow

Kanban Board

Also called: Kanban, Task board, Board view, Swimlane board

Splits tasks into side-by-side columns by status. Each task is a small card, and dragging a card to another column changes its status.

Grayscale wireframe, structure only

Click “Labeled” to see what each part is called, or “Anti-pattern” to see the most common mistake.

How to tell AI

Swap in your own content first

Use a kanban layout to manage tasks: four columns side by side, "To do, In progress, In review, Done". Each column is 280px wide with a light gray background, and the column header shows the name and card count. Cards are white and show the title, assignee avatar, due date and priority tag. Cards can be dragged within a column and between columns, show a drop placeholder while dragging, and save right away on drop. Put "+ Add task" at the bottom of each column.

Send to

Component library

01Decide

Does your content look like this?

Check both columns to confirm Kanban Board is what you need.

Use Kanban Board when

Each work item is in a clear status and moves between a few statuses
The team needs to see at a glance how many tasks are piling up at each stage
A moderate number of work items (a few dozen), each only needing a title and three or four key details
Users want to change the status directly by dragging

Pick something else when

There are many items (hundreds) that need filtering, sorting and comparing by several fields
Use insteadData Table
Items have no status flow and are just grouped for display
There are more than seven or eight statuses, so you have to scroll far sideways to see them all
Mostly used on phones, where the screen can't fit several columns

Not sure? Upload a screenshot and page analysis will check which layout each block should use.

02Pitfalls

Common misuse

It looks like it works, but it makes things harder for users.

01
Cards piled with fields, so each column can only fit two or three of them
The wireframe below shows this case. The red dashed box marks the problem.The wireframe on the right shows this case. The red dashed box marks the problem.
02
Dragging is the only way to change status, so keyboard and mobile users can't do it
03
Nothing is saved after dragging to another column, so the card jumps back when the page refreshes

Anti-pattern, matches item 01

03Spot it

How to spot it

Look at the overall structure first, then check a few features you can spot at a glance.

Structure

Several status columns side by side. Each column has a header (status name and count) and task cards stacked vertically, and cards can be dragged between columns.

PartsClick one to highlight it in the wireframe above

04Explained

In detail

In software, a kanban board most often looks like the task boards in Trello, Jira or Asana: several columns side by side, like "To do, In progress, In review, Done". Each column has its name and card count at the top, with a stack of task cards below. Cards show the title, the assignee's avatar, the due date and a priority tag.

Its key feature is "position is status". The column a card is in is its status, so dragging a card from "In progress" to "Done" updates its status. The team can see at a glance which stage has too many tasks piling up.

It suits a moderate number of work items (a few dozen cards) with a clear status flow. When there are hundreds of tasks that need filtering and comparing by several fields, switch to a Data Table; many products offer both a "Board view" and a "Table view". Keep it to about three to six columns, because more means scrolling far sideways.

Developer infoTerm ID, DOM cues, match priority

Term ID: layout-kanban
DOM selectors: No DOM cues. This concept isn't detected directly on a page.
Priority: 1 · when several match at the same level, the higher priority wins
Version: v2 · updated Sep 29, 2026