Page Kit
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<section class="c-image-split-block rpf-decorative-section" style="--c-image-split-block-background: #ffffff">
  <div >
    <div class="c-image-split-block__container">
      <div class="c-image-split-block__content">
        <h2>A sample heading</h2>
        <p>Cupcake ipsum dolor. Sit amet marshmallow topping cheesecake muffin. Halvah croissant candy canes bonbon candy.</p>
        <a class="rpf-button rpf-button" href="https://google.com">Visit Link<span class="rpf-button__icon material-symbols-sharp">open_in_new</span></a>
      </div>
      <div class="c-image-split-block__image">
        <img alt="Alt Text" height="400" width="800" srcset="https://static.raspberrypi.org/wallpaper/islands.jpg 2x" src="https://static.raspberrypi.org/wallpaper/fjord.jpg" />
      </div>
    </div>
  </div>
</section>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
link = show_link ? { href:, label: } : {}
c(
  'site/image_split_block',
  {
    title:,
    text: ActiveSupport::SafeBuffer.new(
      text
    ),
    image: {
      alt: 'Alt Text',
      height: 400,
      width: 800,
      src: random_image_src,
      srcset: {
        "#{random_image_src}": '2x'
      }
    },
    link:,
    full_bleed_image:,
    image_on_left:,
    full_width_background:,
    background_colour:
  }
)

No notes provided.

Param Description Input

The heading

HTML text

Whether to show the link

The link href

The link label

Whether the image should be full bleed

Whether the image should be on the left

Whether the background should be full width

The background colour