Split Panel Kanban Board CTA Block for React

Edit COLUMNS and TASKS at the top of the file. Each task has a title and the column it starts in, as an index into COLUMNS. Each card has its own row, so the board is the same height whatever is where; keep to four to six tasks so it stays a glance. The counts, the status sentence and the "all done" message all work from the data, so there is nothing else to update.

A column that stacks its cards changes height every time a card leaves or arrives, and the text beside the board jumps with it. Here every card keeps a row and only changes column, so nothing around the board ever moves. Below the sm breakpoint the rows become a single column of cards, each with its column as a label.

The board is a list named "Board", and each card is a list item. Each card's button is a real button with a name that says what it does, such as "Move on “Fix the login redirect” to Done", so a screen reader user can tell the cards apart and hear where one will go. After a move, a polite status line says where the card went and how many are done. The column headers and the empty cells are decoration and are hidden; each card announces its own column instead.

No: the buttons are the only way to move one, which keeps it usable from a keyboard, a switch or a screen reader without extra code. If you add drag and drop to a real board, keep a button like this one beside it, so the same move is possible without a pointer.

The panel fades up on load and a card slides in from the side of the column before it, in the reading direction, so it mirrors in right-to-left layouts. Reduced motion turns both off: the card is simply in its new column.

Replace moveOn with a call to your own API, update placed when it succeeds and keep the status line as the confirmation. Nothing here talks to a server, so the demo always succeeds and starts over from Done with "Reopen".