Data display

Board

Kanban columns that scroll and snap horizontally; cards inside are light glass.

Examples

Board

Backlog 2
Token docs

Swatches for every tone.

RTL pass
In progress 1
Behaviours
AL72%
Done 2
No outlines
Squares

Anatomy

.boardHorizontal row of fixed-width columns that scrolls and snaps.
> section.columnOne column on a tinted fill.
> headerColumn title, with an optional count .badge pushed to the end.
> .cardCompact cards with a lighter shadow and a grab cursor. Any number.

Accessibility

  • The grab cursor is a hint only; aequitas ships no drag and drop. Whatever moves cards must also work from the keyboard, e.g. a menu on each card.
  • A <section> is only announced as a region when it has a name. Label each column with aria-labelledby pointing at its title.
  • The board scrolls sideways. Where scroll containers are not focusable by default, give it tabindex="0" and an aria-label.
Jump to
ProportionFoundations
MaterialFoundations
PresetsFoundations
ShellLayouts · Application
Container and stacksLayouts · Pages
SplitLayouts · Pages
Grid, bento, masonryLayouts · Pages
Switcher and rowLayouts · Pages
↑↓Move↵OpenescClose