← Back to Docs
List UI Patterns
Six battle-tested layout recipes for rendering collections. Pick based on data density, user intent, and visual priority.
Card Grid
Responsive 1–3 column grid with hover lift. Best for browse-heavy UIs.
gridhoverresponsive
Dense Table
Full-width rows with sortable headers. Ideal for admin panels and data-heavy views.
tablesortdense
Split Row
Left thumbnail, right metadata. Great for search results and media libraries.
mediasearchcompact
Kanban Board
Horizontal lanes with draggable cards. Maps to pipeline and status workflows.
boarddragstatus
Masonry Feed
Pinterest-style variable-height columns. Works for visual content discovery.
masonryvisualdiscovery
Timeline
Vertical chronological stream with date markers. Suits activity logs and changelogs.
timelinelogchronological
Decision Flow
High density? Dense Table or Split Row.
Visual-first? Masonry Feed or Card Grid.
Workflow status? Kanban Board.
Time-ordered events? Timeline.