Image tiles list

A series of images and their descriptions or captions are placed as tiles.

Example

Code sample

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<div
  data-comment="Disregard this element please, for visualisation only."
  style="background-color: #eee; padding: 1rem;">
  <ul class="list_image_tiles">
    <li>
      <figure>
        <img src="https://placekitten.com/300/400" width="300" height="400" alt="" loading="lazy">
        <figcaption>
          Mighty floof
        </figcaption>
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://placekitten.com/300/300" width="300" height="300" alt="" loading="lazy">
        <figcaption>
          Supreme unit
        </figcaption>
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://placekitten.com/400/300" width="400" height="300" alt="" loading="lazy">
        <figcaption>
          Chonky floof
        </figcaption>
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://placekitten.com/200/400" width="200" height="400" alt="" loading="lazy">
        <figcaption>
          Slinky floof
        </figcaption>
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://placekitten.com/200/200" width="200" height="200" alt="" loading="lazy">
        <figcaption>
          Micro unit
        </figcaption>
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://placekitten.com/400/200" width="400" height="200" alt="" loading="lazy">
        <figcaption>
          Soon floof soon.<br>
          Be patient.
        </figcaption>
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://placekitten.com/100/400" width="100" height="400" alt="" loading="lazy">
        <figcaption>
          Slinky floof
        </figcaption>
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://placekitten.com/200/100" width="200" height="100" alt="" loading="lazy">
        <figcaption>
          Micro unit
        </figcaption>
      </figure>
    </li>
    <li>
      <figure>
        <img src="https://placekitten.com/400/100" width="400" height="100" alt="" loading="lazy">
        <figcaption>
          Soon floof
        </figcaption>
      </figure>
    </li>
  </ul>
</div>

Usage notes

No elements are allowed between the <ol> or <ul> and <li> elements.
Breakpoints are based on a min-width of each tile, plus any gutters.
Please use square images where possible.
Similar to the Blog post list but not intended to act as navigation.

Source files