Usage
Image lists represent a collection of items in a repeated pattern. They help improve the visual comprehension of the content they hold.
Principles
Visual
Image lists allow users to scan content based on images.
Comparable
Image lists allow users to easily compare items within a collection.
Integrated
Image lists are responsively integrated with the surrounding content and layout.
Anatomy
Image lists are comprised of containers that are set at a certain aspect ratio. Each item in an image list can display optional text and iconography below or above the image container.
The image container displays an image list item’s image or illustration.
2. Text labels (optional)
Text labels display one line of text related to an image list item.
3. Actionable iconography (optional)
Actionable iconography can represent related actions.
4. Text protection (optional)
Text protection is a semi-opaque scrim placed in front of imagery to keep text above it legible.
5. Image list item
Image list items represent individual items in an image list.
Behavior
Types
Theming
Specs
Standard
- Measurement 4
- Measurement 4
- Measurement 4
- 1x1
![](https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F1YjgyaosHlOepYbU56MBu9ZkfFeztV--t%2Fimagelist-spec-standard.png)
Quilted
- Measurement 4
- Measurement 4
- 1x1
- 2x1
- 1x1
![](https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F10q_TtBcAsVGS7yYsWN-tIofEDh7_s9hs%2Fimagelist-spec-quilted.png)
Masonry—mobile
- Measurement 4
- Measurement 4
- Measurement 4
- Measurement 4
- Measurement 4
- 174224
![](https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F1UUsR3GsxtaGhkKpK2Se2hk0gocHt2PRm%2Fimagelist-spec-mobile-masonry.png)
Masonry—desktop
- Measurement 4
- Measurement 4
![](https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F10qo-sx2sEniAkhEb8xx1PBSZC_pSbdU3%2Fimagelist-spec-desktop-masonry.png)
- Measurement 28
- Measurement 32
- Measurement 8
- 2424
![](https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F1kcKxdsyOrboNwk-BodKjE2qHVXkxNLQu%2Fimagelist-spec-desktop-masonry-labelbelow.png)
Masonry—tablet
- Measurement 4
- Measurement 4
- Measurement 4
- Measurement 4
- Measurement C
- Measurement 24
- Measurement 48
- Measurement 12
- Measurement 12
- Measurement 12
- Measurement 48
- 192246
![](https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F19eAHcCW6kTHGOt3pEyz9KIUKd-XFwTjp%2Fimagelist-spec-tablet-masonry.png)
Woven
- Measurement 24
- Measurement 24
- Measurement 24
- Measurement 28
- 1x1
- 5x7
![](https://storage.googleapis.com/spec-host-backup/mio-components%2Fassets%2F1-pLRzGt9MH5ZQJR7FKpL8E-nbHTocxQk%2Fimagelist-spec-woven.png)