Page Kit
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="pk-c-detailed-link-card">
  <div class="pk-c-detailed-link-card__wrapper">
    <h3>
      <span>Issue 9</span>
      Title
    </h3>
    <div class="pk-c-detailed-link-card__image">
      <img width="150" srcset="https://static.raspberrypi.org/wallpaper/balloon.jpg 2x" attrs="alt Issue number 9" src="https://static.raspberrypi.org/wallpaper/canyon.jpg" />
    </div>
    <div class="pk-c-detailed-link-card__links">
      <a class="pk-c-detailed-link-card__link rpf-button" href="https://www.raspberrypi.org">Download free PDF</a>
      <a class="pk-c-detailed-link-card__link rpf-button--secondary rpf-button" href="https://publications.raspberrypi.org/collections/hello-world">Buy Issue<span class="rpf-button__icon material-symbols-sharp">open_in_new</span></a>
      <a class="pk-c-detailed-link-card__link rpf-button--tertiary rpf-button" href="https://www.raspberrypi.org/products">Learn about issue</a>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
c('site/detailed_link_card', {
    title_prefix:,
    title:,
    image: {
      width: 150,
      src: random_image_src,
      srcset: {
        "#{random_image_src}": '2x'
      },
      attrs: {
        alt: 'Issue number 9'
      }
    },
    primary_link: { href: primary_link_href, label: primary_link_label },
    secondary_link: { href: secondary_link_href, label: secondary_link_label },
    tertiary_link: { href: tertiary_link_href, label: tertiary_link_label }
  })

No notes provided.