Page Kit
x
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="c-success-hero">
  <div class="c-success-hero__container">
    <div class="c-success-hero__content">
      <img alt="Alt Text" height="132" width="132" srcset="https://static.raspberrypi.org/wallpaper/waterfall.jpg 2x" src="https://static.raspberrypi.org/wallpaper/trees.jpg" />
      <h1>Thank you for subscribing!</h1>
      <p>We are able to create free educational resources like Hello World thanks to our supporters around the world. You can support our work by making a contribution of any size. <a href="#">Click here to find out more</a>.</p>
      <div class="c-success-hero__links">
        <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/">Hello World home</a>
        <a data-event-category="Signpost: Learn" data-event-label="Hero: parents' guide button" data-event-action="click" class="rpf-button--secondary rpf-button" href="https://www.raspberrypi.org/">Manage your subscription</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
c(
  'site/success_hero',
  title:,
  copy:
    ActiveSupport::SafeBuffer.new(copy),
  icon: {
    alt: 'Alt Text',
    height: 132,
    width: 132,
    src: random_image_src,
    srcset: {
      "#{random_image_src}": '2x'
    }
  },
  primary_link: {
    href: primary_href,
    label: primary_label,
    attrs: {
      data: {
        event_category: 'Signpost: Learn',
        event_label: "Hero: parents' guide button",
        event_action: 'click'
      }
    }
  },
  secondary_link: {
    href: secondary_href,
    label: secondary_label,
    attrs: {
      data: {
        event_category: 'Signpost: Learn',
        event_label: "Hero: parents' guide button",
        event_action: 'click'
      }
    }
  }
)

No notes provided.

Param Description Input

The title to display in the hero

HTML copy to display in the hero

The URL for the primary button

The label for the primary button

The URL for the secondary button

The label for the secondary button