Figures

Figure Default

Image with title caption
Figure Title
Standard description below the image.
HTML 
<figure>
            <img
                src="https://via.placeholder.com/600x400"
                alt="Image with title caption"
            />
            <figcaption class="ss-c-figcaption--title">Figure Title</figcaption>
            <figcaption>Standard description below the image.</figcaption>
        </figure>

Figure Rounded

Image with title caption
Figure Title
Standard description below the image.
HTML 
<figure class="ss-c-figure--rounded">
            <img
                src="https://via.placeholder.com/600x400"
                alt="Image with title caption"
            />
            <figcaption class="ss-c-figcaption--title">Figure Title</figcaption>
            <figcaption>Standard description below the image.</figcaption>
        </figure>

Figure Aspect Ratio 16x9

16x9 Aspect Ratio
Figure Title
Image constrained to 16:9 ratio using utility class.
HTML 
<figure class="ss-c-figure--rounded">
            <div class="aspect_ratio--16x9">
                <img
                    src="https://via.placeholder.com/1280x720"
                    alt="16x9 Aspect Ratio"
                />
            </div>
            <figcaption class="ss-c-figcaption--title">Figure Title</figcaption>
            <figcaption>
                Image constrained to 16:9 ratio
                using utility class.
            </figcaption>
        </figure>

Figure Aspect Ratio 2x3

2x3 Aspect Ratio
Figure Title
Image constrained to 2:3 ratio using utility class.
HTML 
<figure class="ss-c-figure--rounded">
            <div class="aspect_ratio--2x3">
                <img
                    src="https://via.placeholder.com/1280x720"
                    alt="2x3 Aspect Ratio"
                />
            </div>
            <figcaption class="ss-c-figcaption--title">Figure Title</figcaption>
            <figcaption>
                Image constrained to 2:3 ratio
                using utility class.
            </figcaption>
        </figure>

Figure Aspect Ratio 3x4

3x4 Aspect Ratio
Figure Title
Image constrained to 3:4 ratio using utility class.
HTML 
<figure class="ss-c-figure--rounded">
            <div class="aspect_ratio--3x4">
                <img
                    src="https://via.placeholder.com/1280x720"
                    alt="3x4 Aspect Ratio"
                />
            </div>
            <figcaption class="ss-c-figcaption--title">Figure Title</figcaption>
            <figcaption>
                Image constrained to 3:4 ratio
                using utility class.
            </figcaption>
        </figure>

Figure Aspect Ratio 4x3

4x3 Aspect Ratio
Figure Title
Image constrained to 4:3 ratio using utility class.
HTML 
<figure class="ss-c-figure--rounded">
            <div class="aspect_ratio--4x3">
                <img
                    src="https://via.placeholder.com/1280x720"
                    alt="4x3 Aspect Ratio"
                />
            </div>
            <figcaption class="ss-c-figcaption--title">Figure Title</figcaption>
            <figcaption>
                Image constrained to 4:3 ratio
                using utility class.
            </figcaption>
        </figure>

Figure Aspect Ratio 3x2

3x2 Aspect Ratio
Figure Title
Image constrained to 3:2 ratio using utility class.
HTML 
<figure class="ss-c-figure--rounded">
            <div class="aspect_ratio--3x2">
                <img
                    src="https://via.placeholder.com/1280x720"
                    alt="3x2 Aspect Ratio"
                />
            </div>
            <figcaption class="ss-c-figcaption--title">Figure Title</figcaption>
            <figcaption>
                Image constrained to 3:2 ratio
                using utility class.
            </figcaption>
        </figure>

Figure Aspect Ratio 1x1

1x1 Aspect Ratio
Figure Title
Image constrained to 1:1 ratio using utility class.
HTML 
<figure class="ss-c-figure--rounded">
            <div class="aspect_ratio--1x1">
                <img
                    src="https://via.placeholder.com/1280x720"
                    alt="1x1 Aspect Ratio"
                />
            </div>
            <figcaption class="ss-c-figcaption--title">Figure Title</figcaption>
            <figcaption>
                Image constrained to 1:1 ratio
                using utility class.
            </figcaption>
        </figure>