Image

Available since 1.0.0

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>