D.School Component Library

Figure: Image 

<figure class="o-figure">
      <a class="o-figure__link" href="/">

          <img class="o-image" loading="lazy" srcset="https://picsum.photos/768/576 768w, https://picsum.photos/960/720 960w" src="https://picsum.photos/480/360" alt="Alt text" />
      </a>
      <figcaption class="o-caption">
          Caption
      </figcaption>
  </figure>
 
{% set base_class = figure.base_class|default('o-figure') %}
{% if figure.link.url and figure.image.src %}
  <figure class="{{ bem(base_class, figure.element, figure.modifiers, figure.extra) }}">
    {% if figure.link.url %}
      <a class="{{ bem(base_class, 'link') }}" href="{{ figure.link.url }}" {{ attributes(figure.link.attributes) }}>
    {% endif %}
      {% include "@responsive-image" with figure %}
    {% if figure.link.url %}
      </a>
    {% endif %}
    {% include "@caption" with figure %}
  </figure>
{% endif %}
 
{
  "figure": {
    "link": {
      "url": "/",
      "target": "_blank"
    },
    "image": {
      "srcset": "https://picsum.photos/768/576 768w, https://picsum.photos/960/720 960w",
      "src": "https://picsum.photos/480/360",
      "alt": "Alt text"
    },
    "caption": {
      "text": "Caption"
    }
  }
}

No notes defined.