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
<section
  class="
    pk-c-secondary-subpage-hero rpf-decorative-section rpf-decorative-section__block-end-wave
    rpf-decorative-section__block-end-wave--mirrored
  "
>
  <div class="pk-c-secondary-subpage-hero__container">
    <div class="pk-c-secondary-subpage-hero__content pk-c-secondary-subpage-hero__content--temp">
      <div class="pk-c-secondary-subpage-hero__copy">
        <h1 class="pk-c-heading">Compelling headline here above the fold is a super long headline that you read.</h1>
        <p class="pk-c-copy">Here is a tagline that includes the benefits for the user. Communicate the single most compelling thing within two lines.</p>
        <div class="pk-c-secondary-subpage-hero__links">
          <a data-event-category="Category" data-event-label="Label" data-event-action="click" class="rpf-button" href="/primary-cta">Primary Button</a>
          <a data-event-category="Category" data-event-label="Label" data-event-action="click" class="rpf-button rpf-button--secondary rpf-button" href="/secondary-cta">Secondary Button</a>
        </div>
      </div>
      <div class="pk-c-secondary-subpage-hero__image">
        <img alt="Alt Text" width="640" srcset="https://static.raspberrypi.org/wallpaper/road.jpg 2x" src="https://static.raspberrypi.org/wallpaper/clouds.jpg" />
      </div>
    </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
28
29
30
31
32
33
34
c('site/secondary_subpage_hero', {
    title:,
    description:,
    image: {
      alt: 'Alt Text',
      width: 640,
      src: random_image_src,
      srcset: {
        "#{random_image_src}": '2x'
      }
    },
    primary_cta: {
      href: primary_href,
      label: primary_label,
      attrs: {
        data: {
          event_category: 'Category',
          event_label: 'Label',
          event_action: 'click'
        }
      }
    },
    secondary_cta: {
      href: secondary_href,
      label: secondary_label,
      attrs: {
        data: {
          event_category: 'Category',
          event_label: 'Label',
          event_action: 'click'
        }
      }
    }
  })

No notes provided.

Param Description Input

The title of the component

The description of the component

The URL for the primary CTA

The label for the primary CTA

The URL for the secondary CTA

The label for the secondary CTA