Page Kit
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="pk-c-image-list">
  <div class="pk-c-image-list__container">
    <div class="pk-c-image-list__content">
      <div class="ui-subtitle">
        <div class="ui-subtitle__container">
          <h2 class="ui-subtitle__title">Hear from the Community</h2>
          <p class="ui-subtitle__text">Lorem ipsum dolor sit amet consectetur. Vulputate risus est non a phasellus sed egestas volutpat. Quis ipsum malesuada vulputate in mauris interdum ut elementum justo.</p>
          <div class="ui-subtitle__links">
            <a class="rpf-button" href="https://www.raspberrypi.org/community-stories">Watch our community stories</a>
          </div>
        </div>
      </div>
    </div>
    <div class="pk-c-image-list__images">
      <ul>
        <li><img alt="Alt Text" height="40" width="320" srcset="https://static.raspberrypi.org/wallpaper/sand.jpg 2x" src="https://static.raspberrypi.org/wallpaper/cliff.jpg" /></li>
        <li><img alt="Alt Text" height="40" width="320" srcset="https://static.raspberrypi.org/wallpaper/cliff.jpg 2x" src="https://static.raspberrypi.org/wallpaper/clouds.jpg" /></li>
      </ul>
    </div>
  </div>
</div>
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
c(
  'site/image_list',
  title:,
  text:,
  images: [
    {
      alt: 'Alt Text',
      height: 40,
      width: 320,
      src: random_image_src,
      srcset: {
        "#{random_image_src}": '2x'
      }
    },
    {
      alt: 'Alt Text',
      height: 40,
      width: 320,
      src: random_image_src,
      srcset: {
        "#{random_image_src}": '2x'
      }
    }
  ],
  link: {
    href:,
    label:
  }
)

No notes provided.

Param Description Input

The title to display above the image list

The text to display below the title

The href for the link

The label for the link