An Image List consists of several items, each containing an image and optionally supporting a text label.

This modules concerns the image list item. If you are looking for information about the image list contianer, refer to Material.ImageList.

Table of Contents

• Resources
• Configuration
  • Configuration Options
• Basic Usage
• Image List Item

Resources

• Demo: Image Lists
• Material Design Guidelines: Image list
• MDC Web: Image List
• Sass Mixins (MDC Web)

Basic Usage

Note that you will have to set the width and margin of image list items yourself, preferably through SASS or through inline CSS.

import Html.Attributes exposing (style)
import Material.ImageList as ImageList
import Material.ImageList.Item as ImageListItem


main =
    ImageList.imageList ImageList.config
        [ ImageListItem.imageListItem
            (ImageList.itemConfig
                |> ImageList.setAttributes
                    [ style "width" "calc(100% / 5 - 4px)"
                    , style "margin" "2px"
                    ]
            )
            "images/photos/3x2/1.jpg"
        ]

Configuration

Configuration Options

Image list Item