E3 Alliance Pattern Library

Image Component: Default 

<div class="image-component image-component--large">
    <div class="image-component__image">
        <figure class="captioned-image">
            <picture class="captioned-image__picture">
                <img class="captioned-image__image" loading="lazy" src="holder.js/1200x800" 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>
 
{
  "site": {
    "name": "E3 Alliance"
  },
  "componentSpacing": "large",
  "component": {
    "type": "image",
    "image": {
      "src": "holder.js/1200x800",
      "altText": "placeholder",
      "caption": "Caption of image"
    }
  }
}

No notes defined.