Page Kit
x
1
2
3
4
5
6
7
8
9
10
11
12
13
<section class="rpf-decorative-section">
  <div class="c-hero">
    <div class="c-hero__container">
      <div class="c-hero__content">
        <h1>Learn at home</h1>
        <p>As well as learning in school, young people can have fun getting creative with tech at home to make things that matter to them.</p>
        <p>That’s why part of our <a href=\"https://www.raspberrypi.org/about/\">educational mission</a> is supporting young people, parents, and educators with free home learning resources.</p>
        <a data-event-category="Signpost: Learn" data-event-label="Hero: parents' guide button" data-event-action="click" class="rpf-button" href="https://www.raspberrypi.org/blog/digital-making-at-home-parents-guide/">Read our guide for parents</a>
      </div>
      <img alt="Alt Text" height="600" width="600" srcset="https://static.raspberrypi.org/wallpaper/fjord.jpg 2x" src="https://static.raspberrypi.org/wallpaper/waterfall.jpg" />
    </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
25
26
27
c(
  'site/hero',
  title:,
  copy:
    ActiveSupport::SafeBuffer.new(copy),
  image: {
    alt: 'Alt Text',
    height: 600,
    width: 600,
    src: random_image_src,
    srcset: {
      "#{random_image_src}": '2x'
    }
  },
  link: {
    href:,
    label:,
    attrs: {
      data: {
        event_category: 'Signpost: Learn',
        event_label: "Hero: parents' guide button",
        event_action: 'click'
      }
    }
  },
  full_bleed:
)

No notes provided.

Param Description Input

The title to display in the hero

HTML copy to display in the hero

The URL to link to

The label for the link

Whether the hero should be full bleed