Page Kit
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="pk-c-image-slice">
  <div class="pk-c-image-slice__container">
    <div class="ui-subtitle">
      <div class="ui-subtitle__container">
        <h2 class="ui-subtitle__title">Image Slice</h2>
        <p class="ui-subtitle__text">Double image slices are the default for the component. The single-image version should be used only for infographics. The aspect-ratio set in Contentful is then applied to both images.</p>
      </div>
    </div>
    <div class="pk-c-image-slice__images">
      <div class="pk-c-image-slice__images--landscape">
        <img alt="Alt Text" width="700" srcset="https://static.raspberrypi.org/wallpaper/bridge.jpg 2x" src="https://static.raspberrypi.org/wallpaper/balloon.jpg" />
      </div>
      <div class="pk-c-image-slice__images--landscape">
        <img alt="Alt Text" width="700" srcset="https://static.raspberrypi.org/wallpaper/waterfall.jpg 2x" src="https://static.raspberrypi.org/wallpaper/temple.jpg" />
      </div>
    </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
second_image = if show_second_image
                 {
                   alt: 'Alt Text',
                   width: 700,
                   src: random_image_src,
                   srcset: {
                     "#{random_image_src}": '2x'
                   }
                 }
               else
                 nil
               end
c(
  'site/image_slice',
  heading:,
  subtitle:,
  aspect_ratio:,
  first_image: {
    alt: 'Alt Text',
    width: 700,
    src: random_image_src,
    srcset: {
      "#{random_image_src}": '2x'
    }
  },
  second_image:
)

No notes provided.

Param Description Input

The heading to display in the image slice

The subtitle to display in the image slice

The aspect ratio of the images. Only applies when there are two images.

Whether to show the second image