Image

A custom class to showcase images in differnt sizes, shapes and responsiveness.

Sizes of Image

To size a regular shaped image use 'img--size__name' to set the dimensions.

Copied!

<img src="image.jpg"
  alt="Image" class="img--sm"/>
<img src="image.jpg"
  alt="Image" class="img--md" />
<img src="image.jpg"
  alt="Image" class="img--lg" />

Copied!

<img src="image.jpg"
  alt="Image" class="img--sm round"/>
<img src="image.jpg"
  alt="Image" class="img--md round" />
<img src="image.jpg"
  alt="Image" class="img--lg round" />

Responsive Image

Add 'img--resp' class to make images responsive with cover fit. Size of image depends on outer parent container.

Copied!

<img src="image.jpg"
alt="Image" class="img--resp" />