Image

Basic Image with Caption

Sample image

        <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

Small inline 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

Contained image

        <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>