Components - Image lists
RTL direction
Dark theme

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

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.

Behavior

Actions

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.

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

Layout grid

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.

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 indicate scroll direction.

Types

Standard image list

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.

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.

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 peer content.

Implementation

By default, each row will show five list items on .medium and above, four list items on .smallext, three list items on .small, and two list items on .xsmall. Please refer to Breakpoint system for more information.

Default padding is 8 dp and the following padding values are available: 1, 2, 4, 8, 16, 20, 24, 32 dp.

Standard image list

<div class="mdc-image-list">
    <div class="list-item">
        <div class="image" style="background-image: url('...');"></div>
    </div>
    .
    .
    .
</div>
16:9 image ratio
<div class="mdc-image-list md-16by9">
    ...
</div>
Supporting text and iconography
Title here
star_outline
Title here
star_outline
Title here
star_outline
Title here
star_outline
Title here
star_outline
<div class="mdc-image-list">
    <div class="list-item">
        <div class="image" style="background-image: url('...');"></div>
        <div class="support">
            <div class="text">...</div>
            <div class="icon">...</div>
        </div>
    </div>
    .
    .
    .
</div>
Overlay supporting text and iconography
Title here
star_outline
Title here
star_outline
Title here
star_outline
Title here
star_outline
Title here
star_outline
<div class="mdc-image-list overlay-support">
    ...
</div>

Background color classes can be added to each supporting element. Please refer to The color system.

Title here
star_outline
Title here
star_outline
Title here
star_outline
Title here
star_outline
Title here
star_outline
<div class="mdc-image-list overlay-support">
    <div class="list-item">
        ...
        <div class="support bg-red-900">
            ...
        </div>
    </div>
    .
    .
    .
</div>

Text protection opacity can be customized by changing the CSS variable --protection-opacity for the support element. Defaults to 0.6.

.mdc-image-list .list-item .support {
    --protection-opacity: 0.6;
}

Woven image list

<div class="mdc-image-list mdc-style-woven">
    .
    .
    .
</div>

Masonry image list

<div class="mdc-image-list mdc-style-masonry">
    <div class="list-item">
        <div class="image">
            <img src="...">
        </div>
    </div>
    .
    .
    .
</div>