Kanban Card

Accessibility

• The title is a heading, and each stat has a full text label.
• Done adds a labelled check and mutes the title, so state is never colour alone.
• handle takes your aria props. The card adds a visible focus ring to it and nothing else.

Motion

• The card fades in over 240 ms, unless appear is false.
• Hover darkens the border over 120 ms.
• Dragging lifts with a 2 degree tilt and a shadow. Lifted adds a 2 px ring with the same tilt. Placeholder dims to 32%.
• With reduced motion, there is no tilt.

Responsive behavior

• Fills its column, up to 358 wide on Mobile.

Performance

• One motion wrapper fades the card in once. Hover is CSS.

• Import KanbanCard from @/components/fetaui/kanban-card. It composes Tag and Avatar from product-kit.
• It has no drag or click behavior. Other props go on the article, so add your own handlers or wrap it in a link. For a board, pass handle to lay a full card button over it, and drive state with lifted, dragging or placeholder from your own drag code.
• state forces the hover or dragging pose for previews. Use done for finished work.
• top and meta replace the first and last rows, and null drops a row. KanbanCardStat and KanbanCardAssignee are exported for those slots. density compact is the dense board look. Kanban renders its cards this way.