Thumbnail

If you're going to use an image as an anchor, we've got you covered. All you gotta do is add one class to your image and voilà!

The .thumbnail class can be applied directly to an <img> element, or an <a> that wraps it. Make sure the <img> has an alt attribute that describes the contents of the image.

Watch this part in video

edit on codepen button
<img class="thumbnail" src="assets/img/thumbnail/01.jpg" alt="Photo of Uranus.">
<a href="#" class="thumbnail"><img src="assets/img/thumbnail/02.jpg" alt="Photo of Neptune."></a>
<img class="thumbnail" src="assets/img/thumbnail/03.jpg" alt="Photo of Pluto.">
Photo of Uranus.
Photo of Neptune.
Photo of Pluto.

Sass Reference

Variables

The default styles of this component can be customized using these Sass variables in your project's settings file.

NameTypeDefault ValueDescription
$thumbnail-border Border solid 4px $white

Border around thumbnail images.

$thumbnail-margin-bottom Length $global-margin

Bottom margin for thumbnail images.

$thumbnail-shadow Shadow 0 0 0 1px rgba($black, 0.2)

Box shadow under thumbnail images.

$thumbnail-shadow-hover Shadow 0 0 6px 1px rgba($primary-color, 0.5)

Box shadow under thumbnail images.

$thumbnail-transition Transition box-shadow 200ms ease-out

Transition proprties for thumbnail images.

$thumbnail-radius Number $global-radius

Default radius for thumbnail images.


Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

thumbnail

@include thumbnail;

Adds thumbnail styles to an element.