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
<div class="pk-c-video-pull-quote-slice">
  <div class="pk-c-video-pull-quote-slice__container pk-background-color--red">
    <div class="pk-c-video-pull-quote-slice__content">
      <h2>“When I started coding, I started to discover that it was very fun, I could create anything I wanted. My imagination was running wild.”</h2>
      <p>Watch Jay’s story to see how this amazing young person is learning and teaching coding inspired by our initiatives.</p>
    </div>
    <div class="pk-c-video-pull-quote-slice__video">
      <div class="c-video">
        <div class="c-video__content">
          <a class="c-video__cover" data-youtube-id="YKseSCYwoc4" data-title="Jay, sharing his love of robotics in his local community, UK" data-event-category="Community story" data-event-label="Play video" data-event-action="click" role="button" href="https://youtu.be/YKseSCYwoc4">
            <img alt="Alt Text" height="400" width="800" srcset="https://static.raspberrypi.org/wallpaper/trees.jpg 2x" src="https://static.raspberrypi.org/wallpaper/trees.jpg" />
          </a>  </div>
        <div class="c-video__cta">
          <a class="rpf-button--tertiary rpf-button" data-event-category="Community story" data-event-label="Read transcript" data-event-action="click" href="/videos/test_video_slug">Read transcript</a>
        </div>
      </div>
    </div>
    <div class="pk-c-video-pull-quote-slice__cta">
      <a data-event-category="Category" data-event-label="Label" data-event-action="click" class="rpf-button" href="/community-stories">Watch more stories</a>
    </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
c(
  'site/video_pull_quote_slice',
  {
    background_colour:,
    quote:,
    copy:,
    cta: {
      href:,
      label:,
      attrs: {
        data: {
          event_category: 'Category',
          event_label: 'Label',
          event_action: 'click'
        }
      }
    }
  }
) do |component|
  component.with_video do
    component.render(Site::VideoComponent.new(
                       {
                         title: 'Jay, sharing his love of robotics in his local community, UK',
                         image: {
                           alt: 'Alt Text',
                           height: 400,
                           width: 800,
                           src: random_image_src,
                           srcset: {
                             "#{random_image_src}": '2x'
                           }
                         },
                         slug: 'test_video_slug',
                         youtube_id:
                       }
                     ))
  end
end

No notes provided.

Param Description Input

The background colour of the component

The quote to display

The copy to display

The href for the CTA

The label for the CTA

The youtube id for the video