Custom theme (replace with client name)

Image: Image With Caption 

<div class="image-component">
    <div class="image-component__image">
        <figure class="image ">
            <picture class="image__picture">
                <source srcset="" type="image/webp">
                <source srcset="" type="image/jpeg">
                <img class="image__image" loading="lazy" type="image/jpeg" src="" alt="" height="" width="">
            </picture>
        </figure>
    </div>
</div>
 
<div class="image-component">
    <div class="image-component__image">
        {% include 'partials/image/image.twig' with {
            image: image,
        } %}
    </div>
</div>
 
{
  "component": {
    "type": "image",
    "image": {
      "src": "https://picsum.photos/800/650",
      "altText": "placeholder",
      "caption": "Caption of image"
    }
  }
}
  • Content: 
    .image-component
    @extends $componentWithMargin

    &__caption
        color #666
        font-family arial
        font-size 16px
  • URL: /components/raw/image/image.styl
  • Filesystem Path: patterns/components/image/image.styl
  • Size: 135 Bytes

No notes defined.