<figure>
    <image class="image--" src="http://via.placeholder.com/640x360" alt="placeholder image" width="640px" height="360px" loading="lazy" />
    <figcaption>placeholder image</figcaption>
</figure>
<figure>
  {{> @image }}
  <figcaption>{{alt}}</figcaption>
</figure>
{
  "src": "http://via.placeholder.com/640x360",
  "alt": "placeholder image",
  "width": "640px",
  "height": "360px"
}
  • Content:
    figure {
      margin: 2em auto;
      max-width: 60vw;
      counter-increment: figure_count;
    
      & img {
    	width: 100%;
    	object-fit: contain;
      }
    
      & figcaption {
        color: var(--color-charcoal);
      }
    
      & figcaption::before {
    	content: 'Figure ' counter(figure_count) ': ';
      }
    }
  • URL: /components/raw/figure/figure.css
  • Filesystem Path: src/components/01-atoms/05-media/figure/figure.css
  • Size: 269 Bytes

Figures

Either all the figures use captions or none of them should. The way that counters work, they will continually to increase whether there is a caption or not.