D.School Component Library

Figure: Picture 

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

          <picture class="o-picture">
              <source media="(min-width: 768px)" srcset="https://picsum.photos/960/720">
              <source media="(min-width: 480px)" srcset="https://picsum.photos/768/675">
              <img class="o-image" loading="lazy" src="https://picsum.photos/480/480" alt="Alt text" />
          </picture>
      </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": false,
      "src": "https://picsum.photos/480/480",
      "alt": "Alt text",
      "sources": [
        {
          "media": "(min-width: 768px)",
          "srcset": "https://picsum.photos/960/720"
        },
        {
          "media": "(min-width: 480px)",
          "srcset": "https://picsum.photos/768/675"
        }
      ]
    },
    "caption": {
      "text": "Caption"
    }
  }
}

No notes defined.