Page Kit
x
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
<div class="c-triple-block">
  <h2>
    Title
  </h2>
  <div class="c-triple-block__intro">
    Sesame snaps dragée cotton candy tootsie roll. Pastry gingerbread jelly-o pastry topping cake toffee.
  </div>
  <div class="c-triple-block__cards">
    <div class="c-link-card">
      <img alt="Alt Text" width="800" height="400" srcset="https://static.raspberrypi.org/wallpaper/sand.jpg 2x" src="https://static.raspberrypi.org/wallpaper/clouds.jpg" />
      <div class="c-link-card__content">
        <h3>
          <a data-event-category="Category" data-event-label="Label" data-event-action="click" href="https://google.com">Learn More</a>
        </h3>
        Sesame snaps dragée cotton candy tootsie roll. Pastry gingerbread jelly-o pastry topping cake toffee.
      </div>
    </div>
    <div class="c-link-card">
      <img alt="Alt Text" width="800" height="400" srcset="https://static.raspberrypi.org/wallpaper/road.jpg 2x" src="https://static.raspberrypi.org/wallpaper/road.jpg" />
      <div class="c-link-card__content">
        <h3>
          <a data-event-category="Category" data-event-label="Label" data-event-action="click" href="https://google.com">Learn More</a>
        </h3>
        Sesame snaps dragée cotton candy tootsie roll. Pastry gingerbread jelly-o pastry topping cake toffee.
      </div>
    </div>
    <div class="c-link-card">
      <img alt="Alt Text" width="800" height="400" srcset="https://static.raspberrypi.org/wallpaper/road.jpg 2x" src="https://static.raspberrypi.org/wallpaper/sand.jpg" />
      <div class="c-link-card__content">
        <h3>
          <a data-event-category="Category" data-event-label="Label" data-event-action="click" href="https://google.com">Learn More</a>
        </h3>
        Sesame snaps dragée cotton candy tootsie roll. Pastry gingerbread jelly-o pastry topping cake toffee.
      </div>
    </div>
  </div>
  <div class="c-triple-block__cta">
    <a class="rpf-button" href="https://google.com">Learn More<span class="rpf-button__icon material-symbols-sharp">open_in_new</span></a>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
cta = show_cta ? { href:, label: } : {}
c(
  'site/triple_block',
  title:,
  copy:,
  cta:
) do |component|
  3.times { component.with_link_card { component.render(link_card_preview(copy)) } }
end

No notes provided.

Param Description Input

The title

The copy to display in the card

The URL to link to

The label for the call to action