Page Kit
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="pk-c-longform-hero">
  <div class="pk-c-longform-hero__container">
    <div class="pk-c-longform-hero__content">
      <div class="ui-subtitle">
        <div class="ui-subtitle__container">
          <h1 class="ui-subtitle__title">Compelling Headline</h1>
          <p class="ui-subtitle__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum semper, ante et auctor finibus, justo mauris fermentum dolor.</p>
          <div class="ui-subtitle__links">
            <a class="rpf-button" href="https://www.raspberrypi.org/">Primary button</a>
            <a class="rpf-button--secondary rpf-button" href="https://www.raspberrypi.org/">Secondary button</a>
          </div>
        </div>
      </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
link = if show_links
         {
           href:,
           label:
         }
       else
         nil
       end
secondary_link = if show_links
                   {
                     href: secondary_href,
                     label: secondary_label
                   }
                 else
                   nil
                 end
c(
  'site/longform_hero',
  title:,
  text:,
  link:,
  secondary_link:
)

No notes provided.

Param Description Input

The title to display in the hero

The text to display in the hero

Whether to show the primary and secondary links

The URL for the primary link

The label for the primary link

The URL for the secondary link

The label for the secondary link