Lists and tables
Lists and tables are structural components for organizing sets of content. Lists arrange items vertically for easy scanning, while tables present structured data in rows and columns for comparison.
Philosophy
Both patterns exist to make large sets of information understandable.
Lists emphasize simplicity and readability.
Tables emphasize structure and comparison.
Both support clarity and hierarchy, helping users find and act on information quickly.
Anatomy
Variants
Single
Basic item.
Grouped
Categories with headings.
States
Idle
Items/rows visible.
Usage tips
Dos
Use lists for simpler content and tables for structured datasets.
Keep rows/items concise and scannable.
Provide search, filters, and pagination for large sets.
Don’ts
Don’t overload with excessive columns or metadata.
Don’t rely only on visual alignment — use headers for clarity.
Don’t forget mobile responsiveness; long tables often need adaptation.
Real-world example
