Page Kit
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="pk-c-stats-image-text-card">
  <div class="pk-c-stats-image-text-card__image">
    <img alt="Alt Text" height="300" width="200" srcset="https://static.raspberrypi.org/wallpaper/sand.jpg 2x" src="https://static.raspberrypi.org/wallpaper/bridge.jpg" />
  </div>
  <div aria-label="This pretitle and this subtitle work with this text to make a single sentence. The strings from these elements are combined and added to an ARIA label in a div that wraps around the titles and text." class="pk-c-stats-image-text-card__content">
    <span class="pk-c-stats-image-text-card__titles">
      <span class="pk-c-stats-image-text-card__pretitle" aria-hidden="true">
        This pretitle
      </span>
      <span class="pk-c-stats-image-text-card__subtitle" aria-hidden="true">
        and this subtitle
      </span>
    </span>
    <span class="pk-c-stats-image-text-card__text" aria-hidden="true">
      work with this text to make a single sentence. The strings from these elements are combined and added to an ARIA label in a div that wraps around the titles and text.
    </span>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
c(
  'site/stats_image_text_card',
  {
    pretitle:,
    subtitle:,
    text:,
    image: {
      alt: 'Alt Text',
      height: 300,
      width: 200,
      src: random_image_src,
      srcset: {
        "#{random_image_src}": '2x'
      }
    }
  }
)

No notes provided.

Param Description Input

The pretitle to display

The subtitle to display

The text to display