Image
Basic Image with Caption
<figure class="ss-c-image">
<picture class="ss-c-image__picture">
<img
class="ss-c-image__img"
src="https://picsum.photos/800/450"
alt="Sample image"
/>
</picture>
<div class="ss-c-image__metadata">
<figcaption class="ss-c-image__caption">
This is a sample image caption with a
<a href="#">link example</a>
.
</figcaption>
<span class="ss-c-image__credit">
Photo Credit: Photographer Name
</span>
</div>
</figure>
Inline Small Image
<figure class="ss-c-image ss-c-image_inline-small">
<picture class="ss-c-image__picture">
<img
class="ss-c-image__img"
src="https://picsum.photos/400/300"
alt="Small inline image"
/>
</picture>
<div class="ss-c-image__metadata">
<figcaption class="ss-c-image__caption">
A smaller inline image variant.
</figcaption>
</div>
</figure>
Image Container
<div class="ss-c-image__container">
<figure class="ss-c-image">
<img
class="ss-c-image__img"
src="https://picsum.photos/400/400"
alt="Contained image"
/>
</figure>
</div>