Foundation
Jump to Nav

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

    <img class="thumbnail" src="thumbnail.jpg" alt="Photo of Uranus.">

    <a href="#" class="thumbnail"><img src="thumbnail.jpg" alt="Photo of Neptune."></a>

## 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 | `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.