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

<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.">

Sass Reference

Variables

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

Name	Type	Default Value	Description
`$thumbnail-border`	Border	`4px solid $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.