Figure

<!-- Default -->
<h2 class="label">Image</h2>

<figure class="featured">
    <img src="../../images/landscape.jpg" alt="alt&#x3D;&quot;View of lovely mountains">
    <figcaption>A view of lovely mountains <cite>https://unsplash.com/photos/NDuPLKYRXQU</cite></figcaption>
</figure>

<!-- No Style -->
<h2 class="label">No Styke</h2>

<figure class="featured no-style">
    <img src="../../images/landscape.jpg" alt="alt&#x3D;&quot;View of lovely mountains">
    <figcaption>A view of lovely mountains <cite>https://unsplash.com/photos/NDuPLKYRXQU</cite></figcaption>
</figure>

<!-- Video -->
<h2 class="label">Video</h2>

<figure class="featured full-width">
    <div class="video"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/977AYjapws0" frameborder="0" allowfullscreen></iframe></iframe>
    </div>
    <figcaption>This is a promo video for u!magine <cite>http://www.uimagine.edu.au</cite></figcaption>
</figure>

<!-- Default -->
<h2 class="label">{{ modifier }}</h2>

<figure class="{{ class }}">
  <img src="{{ path media }}" alt="{{ alt }}">
  <figcaption>{{{ caption }}}</figcaption>
</figure>

<!-- No Style -->
<h2 class="label">{{ modifier }}</h2>

<figure class="{{ class }}">
  <img src="{{ path media }}" alt="{{ alt }}">
  <figcaption>{{{ caption }}}</figcaption>
</figure>

<!-- Video -->
<h2 class="label">{{ modifier }}</h2>

<figure class="{{ class }}">
  {{{ media }}}
  <figcaption>{{{ caption }}}</figcaption>
</figure>

The new <figure> HTML element acts as a simple responsive container for media and by <figcaption> a simple way to make media more accessible. Figure can also be modified - see the Image and Video modifiers to change size and location.