Figure with Caption

Design System Navigation

Figure with Caption Complete

  • 
    
    <figure class="o-figure ">
      <div class="o-figure__image">
          <picture class="picture">
        <!--[if IE 9]><video style="display: none;"><![endif]-->
              <source srcset="//picsum.photos/1200/900" media="(min-width: 900px)">
                  <source srcset="//picsum.photos/900/675" media="(min-width: 700px)">
            <source srcset="//picsum.photos/700/525" media="(min-width: 500px)">
        <!--[if IE 9]></video><![endif]-->
    
              <img itemprop="image" srcset="//picsum.photos/500/375" alt="Alt Text">
          </picture>
      </div> <!-- /.o-figure__image -->
      <div class="o-figure__caption">
        <figcaption class="o-figcaption">
      <p class="o-caption u-color--gray u-font--secondary--s"></p>
    </figcaption>
      </div> <!-- /.o-figure__caption -->
    </figure> <!-- /.o-figure -->
    
    
    <figure class="o-figure {{ figure_class }}">
      <div class="o-figure__image">
        {% include '@atoms/images/picture.twig' %}
      </div> <!-- /.o-figure__image -->
      <div class="o-figure__caption">
        {% include '@molecules/media/figcaption.twig' %}
      </div> <!-- /.o-figure__caption -->
    </figure> <!-- /.o-figure -->