Image lists

Image lists display a collection of images in an organized grid.


Usage

Image lists represent a collection of items in a repeated pattern. They help improve the visual comprehension of the content they hold.

Principles

Image lists are visual, comparable, and integrated.

Read More

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.

Types

  1. Standard image lists are best for items of equal importance. They have a uniform container size, ratio, and padding.
  2. Quilted image lists emphasize certain items over others in a collection. They create hierarchy using varied container sizes and ratios.
  3. Woven image lists facilitate the browsing of peer content. They display content in containers of varying ratios to create a rhythmic layout.
  4. Masonry image lists facilitate the browsing of uncropped peer content. Container heights are sized based on the image size.

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.

1. 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.

Padding

Padding can vary between images in an image list. The following padding values are recommended: 1, 2, 4, 8, 16, 20, 24, 32 dp.

Read More

Padding can vary between images in an image list. The following padding values are recommended: 1, 2, 4, 8, 16, 20, 24, 32 dp.


Behavior

Actions

Image lists items may be tapped, dragged, filtered, or sorted.

Read More

Image lists items may be tapped, dragged, filtered, or sorted.

Tapping an image list item displays more detail about that item.

Image list content can be filtered or sorted by date, file size, alphabetical order, or other parameters.

Caution.

You can drag an image list item to reorder it, but this interaction should be disabled if images are sorted or filtered.

Don’t.

Don’t allow swipe gestures on individual image list items. Image lists should be perceived as a group.

Layout grid

Image list column structures don’t need to align to the layout grid. Only the perimeter of the image list itself needs to align to the...

Read More

Defined layout

Image list column structures don’t need to align to the layout grid. Only the perimeter of the image list itself needs to align to the layout grid.

An image list spanning eight columns of the layout grid, with 16dp padding

Alignment with other components

Image lists can be placed adjacent to other components in the layout grid.

An image list spanning three columns of the layout grid, with 8dp padding

Responsive

Image lists inherit the responsive behavior of the layout grid.

Image lists respond to the responsive layout grid.

Image lists are fixed to the layout grid.

Scrolling

Image lists can scroll vertically or horizontally. All items in an image list must scroll together as a collection. Image cropping can be used to...

Read More

Image lists can scroll vertically or horizontally. All items in an image list must scroll together as a collection. Image cropping can be used to indicate scroll direction.

Image list items scroll together.

Image lists can scroll horizontally.


Types

Standard image list

Standard image lists are best for items of equal importance. They have a uniform container size, ratio, and padding.

Read More

Standard image lists are best for items of equal importance. They have a uniform container size, ratio, and padding.

Standard image lists can be displayed with or without text labels.

  1. image list with images only
  2. image list with images and text labels

In compact layouts, labels can appear above the image container using an image treatment that provides text protection to ensure legibility.

Quilted image list

Quilted image lists emphasize certain items over others in a collection. They use varied container sizes and ratios to create hierarchy across images.

Read More

Quilted image lists emphasize certain items over others in a collection. They use varied container sizes and ratios to create hierarchy across images.

Don’t.

Quilted image lists shouldn’t display text below the image container, as it disrupts the layout.

Woven image list

Woven image lists use alternating container ratios to create a rhythmic layout. A woven image list is best for browsing peer content.

Read More

Woven image lists use alternating container ratios to create a rhythmic layout. A woven image list is best for browsing peer content.

Masonry image list

Masonry image lists use dynamically sized container heights that reflect the aspect ratio of each image. This image list is best used for browsing uncropped...

Read More

Masonry image lists use dynamically sized container heights that reflect the aspect ratio of each image. This image list is best used for browsing uncropped peer content.


Theming

Crane Material Theme

This travel app’s image lists have been customized using Material Theming. Areas of customization include color, typography, and shape. Crane is a travel app that...

Read More

This travel app’s image lists have been customized using Material Theming. Areas of customization include color, typography, and shape.

Crane’s customized image list

Color

Crane’s image list text uses custom color.

Element

Category

Attribute

Value

Surface

Surface

Color

Opacity

#FFFFFF

100%

Text

On Surface

Color

Opacity

#000000

87%

Typography

Crane’s image list text uses custom typography.

Element

Category

Attribute

Value

Text

Subtitle 1

Typeface

Font

Size

Case

Raleway

Medium

16

Title case

Shape

Crane’s image lists have custom corner shapes on image containers.

Element

Attribute

Value

Image container

Top left corner

Top right corner

Bottom right corner

Bottom left corner

Rounded 4dp

Rounded 4dp

Rounded 4dp

Rounded 4dp

Owl Material Theme

This education app’s image list text has been customized using Material Theming. Owl is an educational app that provides courses for people who want to...

Read More

This education app’s image list text has been customized using Material Theming.

Owl’s customized image list.

Typography

Owl’s image list text uses custom typography.

Element

Category

Attribute

Value

Text

Subtitle 1

Typeface

Font

Size

Case

Rubik

Medium

16

Title case

Shrine Material Theme

This retail app’s image lists have been customized using Material Theming. Areas of customization include color and typography. Shrine is a lifestyle and fashion brand...

Read More

This retail app’s image lists have been customized using Material Theming. Areas of customization include color and typography.

Shrine’s customized image list

Color

Shrine’s image list text uses custom color.

Element

Category

Attribute

Value

Surface

Surface

Color

Opacity

#FFFBFA

100%

Text

On Surface

Color

Opacity

#442C2E

100%

Typography

Shrine’s image list text uses custom typography.

Element

Category

Attribute

Value

Text

Subtitle 1

Typeface

Font

Size

Case

Raleway

Medium

16

Title case


Specs

Standard

  • 4
  • 4
  • 4
  • 1x1
flip
flipSpecs only available at larger screen size

All measurements are displayed in device-independent pixels (dps)

Quilted

  • 4
  • 4
  • 1x1
  • 2x1
  • 1x1
  • General

    Scrim

    #000000 Opacity:60%

flip
flipSpecs only available at larger screen size

All measurements are displayed in device-independent pixels (dps)

Masonry—mobile

  • 4
  • 4
  • 4
  • 4
  • 4
  • 174224
  • General

    Scrim

    #000000 Opacity:60%

flip
flipSpecs only available at larger screen size

All measurements are displayed in device-independent pixels (dps)

Masonry—desktop

  • 4
  • 4
  • General

    Scrim

    #000000 Opacity:60%

flip
flipSpecs only available at larger screen size

All measurements are displayed in device-independent pixels (dps)

  • 28
  • 32
  • 8
  • 2424
flip
flipSpecs only available at larger screen size

All measurements are displayed in device-independent pixels (dps)

Masonry—tablet

  • 4
  • 4
  • 4
  • 4
  • C
  • 24
  • 48
  • 12
  • 12
  • 12
  • 48
  • 192246
flip
flipSpecs only available at larger screen size

All measurements are displayed in device-independent pixels (dps)

Woven

  • 24
  • 24
  • 24
  • 28
  • 1x1
  • 5x7
flip
flipSpecs only available at larger screen size

All measurements are displayed in device-independent pixels (dps)


Implementation

Image list implementation support for each platform is indicated below.

Web Material Component

Status: Under Development