Standard image list
- const BASE_URL = 'https://material-components.github.io/material-components-web-catalog/static/media/photos'
+mdc-image-list.standard-image-list
for n in Array(15).fill(1).map((value, index) => value + index)
+mdc-image-list__item(
image=`${BASE_URL}/3x2/${n}.jpg`
)Standard image list with text protection
Text Label
Text Label
Text Label
Text Label
Text Label
Text Label
Text Label
Text Label
Text Label
Text Label
Text Label
Text Label
Text Label
Text Label
Text Label
- const BASE_URL = 'https://material-components.github.io/material-components-web-catalog/static/media/photos'
+mdc-image-list.standard-image-list()(withTextProtection)
for n in Array(15).fill(1).map((value, index) => value + index)
+mdc-image-list__item(
image=`${BASE_URL}/3x2/${n}.jpg`
label='Text Label'
)Masonry image list
- const BASE_URL = 'https://material-components.github.io/material-components-web-catalog/static/media/photos'
+mdc-image-list.masonry-image-list()(masonry)
+mdc-image-list__item(`${BASE_URL}/3x2/16.jpg`)
+mdc-image-list__item(`${BASE_URL}/2x3/1.jpg`)
+mdc-image-list__item(`${BASE_URL}/3x2/1.jpg`)
+mdc-image-list__item(`${BASE_URL}/2x3/2.jpg`)
+mdc-image-list__item(`${BASE_URL}/2x3/3.jpg`)
+mdc-image-list__item(`${BASE_URL}/3x2/2.jpg`)
+mdc-image-list__item(`${BASE_URL}/2x3/4.jpg`)
+mdc-image-list__item(`${BASE_URL}/3x2/3.jpg`)
+mdc-image-list__item(`${BASE_URL}/2x3/5.jpg`)
+mdc-image-list__item(`${BASE_URL}/3x2/4.jpg`)
+mdc-image-list__item(`${BASE_URL}/2x3/6.jpg`)
+mdc-image-list__item(`${BASE_URL}/3x2/5.jpg`)
+mdc-image-list__item(`${BASE_URL}/2x3/7.jpg`)
+mdc-image-list__item(`${BASE_URL}/3x2/6.jpg`)
+mdc-image-list__item(`${BASE_URL}/3x2/7.jpg`)






