Custom theme (replace with client name)

Image Component: Image With Caption 

<div class="image-component image-component--large">
    <div class="image-component__image">
        <figure class="captioned-image">
            <picture class="captioned-image__picture">
                <source srcset="https://picsum.photos/800/650 1280w " sizes="(max-width: 800px) 100vw, 50vw" type="image/webp">
                <source srcset="https://picsum.photos/800/650 1280w " sizes="(max-width: 800px) 100vw, 50vw" type="image/jpeg">
                <img class="captioned-image__image" loading="lazy" src="https://picsum.photos/800/650" alt="placeholder">
            </picture>
            <figcaption class="captioned-image__caption captioned-image__caption--">
                Caption of image
            </figcaption>
        </figure>

    </div>
</div>
 
{% import "bits/macros/imageSource.twig" as imageMacros %}

<div class="image-component image-component--{{ componentSpacing }}">
    <div class="image-component__image">
        {{ imageMacros.createWidthOnlyCrop(component.image, 1280, background) }}
    </div>
</div>
 
{
  "componentSpacing": "large",
  "component": {
    "type": "image",
    "image": {
      "src": "https://picsum.photos/800/650",
      "altText": "placeholder",
      "caption": "Caption of image"
    }
  }
}

No notes defined.