Skip to content
STYLESCAPE

Figures

Figure Default

Image with title caption
Figure Title
Standard description below the image.
HTML 
<figure class="ss-c-figure">
            <img
                src="/img/placeholder/600x400.svg"
                alt="Image with title caption"
            />
            <figcaption>
                <span class="ss-c-figure__caption">Figure Title</span><br />
                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 ss-c-figure--rounded">
            <img
                src="/img/placeholder/600x400.svg"
                alt="Image with title caption"
            />
            <figcaption>
                <span class="ss-c-figure__caption">Figure Title</span><br />
                Standard description below the image.
            </figcaption>
        </figure>

Figure Aspect Ratio 16x9

16x9 aspect ratio

ss-c-figure--16x9 crops the image to a 16:9 box.

HTML 
<figure
            class="ss-c-figure ss-c-figure--rounded ss-c-figure--16x9"
            style="width: 20rem"
        >
            <img
                src="/img/placeholder/1280x720.svg"
                alt="16x9 aspect ratio"
            />
        </figure>
        <p>
            <code>ss-c-figure--16x9</code> crops the image to a
            16:9 box.
        </p>

Figure Aspect Ratio 2x3

2x3 aspect ratio

ss-c-figure--2x3 crops the image to a 2:3 box.

HTML 
<figure
            class="ss-c-figure ss-c-figure--rounded ss-c-figure--2x3"
            style="width: 20rem"
        >
            <img
                src="/img/placeholder/1280x720.svg"
                alt="2x3 aspect ratio"
            />
        </figure>
        <p>
            <code>ss-c-figure--2x3</code> crops the image to a
            2:3 box.
        </p>

Figure Aspect Ratio 3x4

3x4 aspect ratio

ss-c-figure--3x4 crops the image to a 3:4 box.

HTML 
<figure
            class="ss-c-figure ss-c-figure--rounded ss-c-figure--3x4"
            style="width: 20rem"
        >
            <img
                src="/img/placeholder/1280x720.svg"
                alt="3x4 aspect ratio"
            />
        </figure>
        <p>
            <code>ss-c-figure--3x4</code> crops the image to a
            3:4 box.
        </p>

Figure Aspect Ratio 4x3

4x3 aspect ratio

ss-c-figure--4x3 crops the image to a 4:3 box.

HTML 
<figure
            class="ss-c-figure ss-c-figure--rounded ss-c-figure--4x3"
            style="width: 20rem"
        >
            <img
                src="/img/placeholder/1280x720.svg"
                alt="4x3 aspect ratio"
            />
        </figure>
        <p>
            <code>ss-c-figure--4x3</code> crops the image to a
            4:3 box.
        </p>

Figure Aspect Ratio 3x2

3x2 aspect ratio

ss-c-figure--3x2 crops the image to a 3:2 box.

HTML 
<figure
            class="ss-c-figure ss-c-figure--rounded ss-c-figure--3x2"
            style="width: 20rem"
        >
            <img
                src="/img/placeholder/1280x720.svg"
                alt="3x2 aspect ratio"
            />
        </figure>
        <p>
            <code>ss-c-figure--3x2</code> crops the image to a
            3:2 box.
        </p>

Figure Aspect Ratio 1x1

1x1 aspect ratio

ss-c-figure--1x1 crops the image to a 1:1 box.

HTML 
<figure
            class="ss-c-figure ss-c-figure--rounded ss-c-figure--1x1"
            style="width: 20rem"
        >
            <img
                src="/img/placeholder/1280x720.svg"
                alt="1x1 aspect ratio"
            />
        </figure>
        <p>
            <code>ss-c-figure--1x1</code> crops the image to a
            1:1 box.
        </p>