Skip to content

Image List

The Image List displays a collection of images in an organized grid.

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

Standard image list

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

  • Breakfast
  • Burger
  • Camera
  • Coffee
  • Hats
  • Honey
  • Basketball
  • Fern
  • Mushrooms
  • Tomato basil
  • Sea star
  • Bike
Press Enter to start editing

Quilted image list

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

  • Breakfast
  • Burger
  • Camera
  • Coffee
  • Hats
  • Honey
  • Basketball
  • Fern
  • Mushrooms
  • Tomato basil
  • Sea star
  • Bike
Press Enter to start editing

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.

  • Bed
  • Kitchen
  • Sink
  • Books
  • Chairs
  • Candle
  • Laptop
  • Doors
  • Coffee
  • Storage
  • Coffee table
  • Blinds
Press Enter to start editing

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.

  • Bed
  • Books
  • Sink
  • Kitchen
  • Blinds
  • Chairs
  • Laptop
  • Doors
  • Coffee
  • Storage
  • Candle
  • Coffee table
Press Enter to start editing

Image list with title bars

This example demonstrates the use of the ImageListItemBar to add an overlay to each item. The overlay can accommodate a title, subtitle and secondary action - in this example an IconButton.

  • December
  • Breakfast
    Breakfast
    @bkristastucchio
  • Burger
    Burger
    @rollelflex_graphy726
  • Camera
    Camera
    @helloimnik
  • Coffee
    Coffee
    @nolanissac
  • Hats
    Hats
    @hjrc33
  • Honey
    Honey
    @arwinneil
  • Basketball
    Basketball
    @tjdragotta
  • Fern
    Fern
    @katie_wasserman
  • Mushrooms
    Mushrooms
    @silverdalex
  • Tomato basil
    Tomato basil
    @shelleypauls
  • Sea star
    Sea star
    @peterlaster
  • Bike
    Bike
    @southside_customs

Title bar below image (standard)

The title bar can be placed below the image.

  • Breakfast
    Breakfast
    by: @bkristastucchio
  • Burger
    Burger
    by: @rollelflex_graphy726
  • Camera
    Camera
    by: @helloimnik
  • Coffee
    Coffee
    by: @nolanissac
  • Hats
    Hats
    by: @hjrc33
  • Honey
    Honey
    by: @arwinneil
  • Basketball
    Basketball
    by: @tjdragotta
  • Fern
    Fern
    by: @katie_wasserman
  • Mushrooms
    Mushrooms
    by: @silverdalex
  • Tomato basil
    Tomato basil
    by: @shelleypauls
  • Sea star
    Sea star
    by: @peterlaster
  • Bike
    Bike
    by: @southside_customs

Title bar below image (masonry)

  • Bed
    swabdesign
  • Books
    Pavel Nekoranec
  • Sink
    Charles Deluvio
  • Kitchen
    Christian Mackie
  • Blinds
    Darren Richardson
  • Chairs
    Taylor Simpson
  • Laptop
    Ben Kolde
  • Doors
    Philipp Berndt
  • Coffee
    Jen P.
  • Storage
    Douglas Sheppard
  • Candle
    Fi Bell
  • Coffee table
    Hutomo Abrianto
Press Enter to start editing

Custom image list

In this example the items have a customized titlebar, positioned at the top and with a custom gradient titleBackground. The secondary action IconButton is positioned on the left. The gap prop is used to adjust the gap between items.

  • Breakfast
    Breakfast
  • Burger
    Burger
  • Camera
    Camera
  • Coffee
    Coffee
  • Hats
    Hats
  • Honey
    Honey
  • Basketball
    Basketball
  • Fern
    Fern
  • Mushrooms
    Mushrooms
  • Tomato basil
    Tomato basil
  • Sea star
    Sea star
  • Bike
    Bike

API

See the documentation below for a complete reference to all of the props and classes available to the components mentioned here.