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
<div class="pk-c-image-text-card">
  <div class="pk-c-image-text-card__container">
    <div class="pk-c-image-text-card__image">
      <img alt="Alt Text" height="417" width="278" srcset="https://static.raspberrypi.org/wallpaper/lasers.jpg 2x" src="https://static.raspberrypi.org/wallpaper/road.jpg" />
    </div>
    <div class="pk-c-image-text-card__content">
      <div class="pk-c-image-text-card__copy">
        <div class="pk-c-image-text-card__titles">
          <h4 class="pk-c-image-text-card__pretitle">
            Pretitle
          </h4>
          <h3 class="pk-c-image-text-card__subtitle">
            Subtitle
          </h3>
        </div>
        <div class="pk-c-image-text-card__text">
          Cupcake ipsum dolor. Sit amet marshmallow topping cheesecake muffin. Halvah croissant candy canes bonbon candy.
        </div>
      </div>
      <div class="pk-c-image-text-card__cta_links">
        <a class="rpf-button rpf-button" href="https://www.raspberrypi.org/">Visit Link</a>
        <a class="rpf-button--secondary rpf-button" href="https://www.raspberrypi.org/">Visit Link</a>
      </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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
primary_cta = if show_buttons
                {
                  href: primary_cta_href,
                  label: primary_cta_label
                }
              else
                {}
              end
secondary_cta = if show_buttons
                  {
                    href: secondary_cta_href,
                    label: secondary_cta_label
                  }
                else
                  {}
                end
image = if show_image
          {
            alt: 'Alt Text',
            height: 417,
            width: 278,
            src: random_image_src,
            srcset: {
              "#{random_image_src}": '2x'
            }
          }
        else
          nil
        end
c(
  'site/image_text_card',
  {
    pretitle:,
    subtitle:,
    text:,
    image:,
    title_on_left:,
    primary_cta:,
    secondary_cta:
  }
)

No notes provided.

Param Description Input

The pretitle

The subtitle

The text

Whether the title should be on the left

Whether to show the image

Whether to show buttons

The primary CTA href

The primary CTA label

The secondary CTA href

The secondary CTA label