Images

Manipulate image positioning and appearance with these extensible classes.

Photo courtesy of freestocks.org and found via Unsplash.

Rounded images

Round the corners of an image with the project variable $radius-brand.

Example HTML

<img class="img--rounded" src="/embrace/img/320px/embrace.jpeg" alt="A warm embrace">

Circular images

Make square images circular. That’s it.

Example HTML

<img class="img--circular" src="/embrace/img/320px/embrace-square.jpeg" alt="A warm embrace">

Floated Images

Float images to the left or right, extending the .float-left and .float-right utility classes, but adding sensible margins to prevent collisions with content. You may wish to .clearfix the parent element, feel free to do so.

Example HTML

  <img class="img--left" src="/embrace/img/320px/embrace.jpeg" alt="A warm embrace">
  

Example HTML

  <img class="img--right" src="/embrace/img/320px/embrace.jpeg" alt="A warm embrace">
  

Image sizing

Make images to cover the parent element to give a background image effect.

Example HTML

<img class="img--cover" src="/embrace/img/640px/embrace.jpeg" alt="A warm embrace">

Retina-squish

Reduce an image size using width classes to ”retina-fy” your image by squishing it into a smaller container! Just wrap an image in any block-level element and resize it with Embrace’s width classes.

Example HTML

<figure class="one-third">
  <img class="img--cover" src="/embrace/img/640px/embrace.jpeg" alt="A warm embrace">
</figure>