Page Kit
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="pk-c-detailed-hero">
  <div class="pk-c-detailed-hero__wrapper">
    <div class="pk-c-detailed-hero__image">
      <img alt="Alt Text" height="720" width="1000" srcset="https://static.raspberrypi.org/wallpaper/islands.jpg 2x" src="https://static.raspberrypi.org/wallpaper/sand.jpg" />
    </div>
    <div class="pk-c-detailed-hero__content">
      <h2>
        <span class="pk-c-detailed-hero__heading-prefix">Issue 20</span>
        The Power of Data
      </h2>
      <div class='pk-c-detailed-hero__description'>
        <p>How are you preparing young children for a digital world? This is the question this primary-teaching themed issue explores, with inspiration, ideas, and advice for the elementary classroom. It is vital that children have a solid foundation of digital literacy skills and conceptual computing understanding and</p>
      </div>
      <div class="pk-c-detailed-hero__links">
        <a data-event-category="Category" data-event-label="Label" data-event-action="click" class="pk-c-detailed-hero__link rpf-button" href="https://google.com">Download free PDF<span class="rpf-button__icon material-symbols-sharp">open_in_new</span></a>
        <a data-event-category="Category" data-event-label="Label" data-event-action="click" class="rpf-button--secondary pk-c-detailed-hero__link rpf-button" href="https://google.com">Buy issue<span class="rpf-button__icon material-symbols-sharp">open_in_new</span></a>
        <a data-event-category="Category" data-event-label="Label" data-event-action="click" class="rpf-button--tertiary pk-c-detailed-hero__link rpf-button" href="https://google.com">Learn about issue<span class="rpf-button__icon material-symbols-sharp">open_in_new</span></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
42
43
44
45
46
47
48
49
50
51
52
c(
  'site/detailed_hero',
  heading:,
  heading_prefix:,
  text: ActiveSupport::SafeBuffer.new(
    text
  ),
  image: {
    alt: 'Alt Text',
    height: 720,
    width: 1000,
    src: random_image_src,
    srcset: {
      "#{random_image_src}": '2x'
    }
  },
  link: {
    href: primary_href,
    label: primary_label,
    attrs: {
      data: {
        event_category: 'Category',
        event_label: 'Label',
        event_action: 'click'
      }
    }
  },
  secondary_link: {
    href: secondary_href,
    label: secondary_label,
    attrs: {
      data: {
        event_category: 'Category',
        event_label: 'Label',
        event_action: 'click'
      }
    }
  },
  tertiary_link: {
    href: tertiary_href,
    label: tertiary_label,
    attrs: {
      data: {
        event_category: 'Category',
        event_label: 'Label',
        event_action: 'click'
      }
    }
  },
  full_bleed_image: false,
  background_colour: '#ffffff'
)

No notes provided.

Param Description Input

The heading

The heading prefix

HTML content for the text block

The URL for the primary CTA

The text for the primary CTA button

The URL for the secondary CTA

The text for the secondary CTA button

The URL for the tertiary CTA

The text for the tertiary CTA button