Collections
A collection is a structured grouping of items presented together, ideal for showing image-based content. Collections make it easier for users to browse, scan, and act on multiple related items.
Philosophy
Collections organize multiple pieces of content into a coherent unit, in a highly visual layout.
They support comparison and discovery across items.
They provide consistency in how items are displayed.
They balance scalability and clarity.
Anatomy
Variants
Grid
Uniform rows/columns, ideal for images/products.
Row
Horizontal scrollable grouping.
States
Idle
Items visible in chosen layout.
Usage tips
Dos
Use collections to present related sets (e.g., products, posts, files).
Keep item layouts consistent to aid scanning.
Use load-more to handle large sets.
Provide empty states with guidance when collection is empty.
Don’ts
Don’t mix unrelated item types without clear grouping.
Don’t overload with too much visual variation — uniformity aids usability.
Don’t forget responsiveness — collections must adapt across devices.
Real-world example
