Lists & Tables

Design patterns for lists and tables based on documented data components from ZUD, including responsive design and data states.

PatternStructureInteractionsStates
Participant Lists
participantsinvited-participants

Avatar + Name + Status + Actions

Vertical list with consistent spacing

item padding: --p-space-300, gaps: --p-space-200
SelectView detailsActions menu
DefaultSelectedLoadingEmpty
Todo Lists
to-do-listtargets-list

Status + Task + Priority + Due Date

Checklist format with status indicators

item padding: --p-space-300, status gap: --p-space-200
Mark completeEditDeleteReorder
PendingIn ProgressCompletedOverdue
Navigation Lists
menucollapsed-subitems

Icon + Label + Badge/Indicator

Hierarchical with indentation

item padding: --p-space-300, indent: --p-space-600
NavigateExpand/collapseSelect
DefaultActiveExpandedCollapsed