Thumbnails

Thumbnails are smaller images typically used in content boxes or cards. Sometimes they are links to the larger version of an image.

They can have rounded corners or be made into circles.

HTML

<figure class="elr-thumbnail">
    <img src="images/cat11.jpg" /gt;
</figure>
<figure class="rounded-thumbnail">
    <img src="images/paris3.jpg" /gt;
</figure>
<figure class="round-thumbnail">
    <img src="images/cat.jpg" /gt;
</figure>

Sass

.elr-thumbnail,
.rounded-thumbnail,
.round-thumbnail {
    float: left;
    margin-right: 20px;
}

.elr-thumbnail { @include elr-thumbnail; }
.rounded-thumbnail { @include elr-thumbnail($white, 150px, 125px, 5px); }
.round-thumbnail { @include elr-thumbnail($white, 150px, null, round); }