Masonry Mixed Height Cards Features Block for React

In the order of the list, which is the order the columns fill: the first card tops the first column and the list runs down it, then down the next. Reading and keyboard order are therefore the DOM order. The defaults are listed so three columns come out about level, so with a different set of cards, reorder the list until they do. Changing the number of columns changes where later cards land, never their order.

It keeps the ticked tasks in state. Each task is a Checkbox named by its own label, so clicking the label or the box toggles it and a screen reader hears "Record the demo, checkbox, checked". The progress bar and the "3 of 7 done" count, a polite status line, are derived from the same list. Edit TASKS and STARTED to change the tasks and what begins ticked.

Add a Card with a title, a description and a small component as its child, and make sure the list stays a flow of cards: they use break-inside-avoid so none splits across columns. Heights come from content, so a taller card simply makes its column longer.

The section has an h2, each card is a list item with an h3, and the only controls are the checklist's Checkboxes and the header link. The other pieces (the quick-add bar, the board, the tags, the thread) are drawings, hidden from assistive technology and not focusable, and each card's sentence says what it shows.

The wall is one column below sm and two from sm, three from lg. Cards keep their natural height, and nothing scrolls sideways at 320 px.

The header fades up once on load, the checklist's progress bar eases to its new width and the stat's digits roll, all with CSS transitions. With reduced motion they are off and everything changes in place.