England Football

Image With Caption 

<figure class="image-with-caption">
    <picture>
        <source media="(max-width: 800px)" srcset="/assets/example-content/image-with-caption-mob.jpg">
        <source media="(min-width: 801px)" srcset="/assets/example-content/image-with-caption.jpg">
        <img src="/assets/example-content/image-with-caption.jpg" alt="">
    </picture>
    <figcaption>Southgate chats to Bukayo Sako in training last November, after the Arsenal plater became one of the latest young players to join the squad.</figcaption>
</figure>

No notes defined.

{
  "caption": "Southgate chats to Bukayo Sako in training last November, after the Arsenal plater became one of the latest young players to join the squad.",
  "image-desktop": "/assets/example-content/image-with-caption.jpg",
  "image-mobile": "/assets/example-content/image-with-caption-mob.jpg",
  "sponsor-logo": "/assets/example-content/white-sponsor-logo-bt.svg"
}
  • Content: 
    .image-with-caption {
  margin: auto;
  max-width: 100%;

  img {
    width: 100%;
  }

  figcaption {
    @include text-s;

    background-color: $color-interface-light;
    color: $white;
    padding: 1rem $spacing-m;
  }
}
  • URL: /components/raw/image-with-caption/image-with-caption.scss
  • Filesystem Path: src/library/components/image-with-caption/image-with-caption.scss
  • Size: 226 Bytes 
<figure class="image-with-caption">
  <picture>
    <source media="(max-width: 800px)" srcset="{{image-mobile}}">
    <source media="(min-width: 801px)" srcset="{{image-desktop}}">
    <img src="{{image-desktop}}" alt="">
  </picture>
  {{#unless legends-caption}}
  <figcaption>{{caption}}</figcaption>
  {{/unless}}
  {{#if legends-caption}}
  <figcaption>{{render '@inline-sponsor' legends-sponsor merge="true"}}</figcaption>
  {{/if}}
</figure>