Image

An image is used to apply shapes to images.

When using images, use the following helpers classes to adjust the size and the shape.

Size and Shape

Size Options: --s 24x24, --m 36x36, --l 48x48

Shape Option: --circle will render a round image

<span class="fd-image--s" aria-label="Image label"
style="background-image: url('/images/thumbs/headshot-male.jpg');"></span>

<span class="fd-image--m" aria-label="Image label"
style="background-image: url('/images/thumbs/headshot-male.jpg');"></span>

<span class="fd-image--l" aria-label="Image label"
style="background-image: url('/images/thumbs/headshot-male.jpg');"></span>

<br><br>

<span class=" fd-image--s fd-image--circle" aria-label="Image label"
style="background-image: url('/images/thumbs/headshot-male.jpg');"></span>

<span class=" fd-image--m fd-image--circle" aria-label="Image label"
style="background-image: url('/images/thumbs/headshot-male.jpg');"></span>

<span class=" fd-image--l fd-image--circle" aria-label="Image label"
style="background-image: url('/images/thumbs/headshot-male.jpg');"></span>