---
title: Thumbnails
layout: component.html
---
***
***
Basic
You can create a thumbnail image using minimal markup.
HTML
{{#markdown}}
```html
```
{{/markdown}}
Rendered HTML
***
## Accessibility
Here's how to use `aria-label`, `role`, and `aria-hidden` to make your thumbnails accessible.
HTML
{{#markdown}}
```html
```
{{/markdown}}
Rendered HTML
***
Advanced
Additional classes can be added to your thumbnails to change its appearance.
HTML
{{#markdown}}
```html
```
{{/markdown}}
Rendered HTML
***
## Customize with Sass
Thumbnails can be easily customized using our Sass variables.
SCSS
{{#markdown}}
```scss
$include-html-media-classes: $include-html-classes;
// We use these to control border styles
$thumb-border-style: solid;
$thumb-border-width: 4px;
$thumb-border-color: $white;
$thumb-box-shadow: 0 0 0 1px rgba($black,.2);
$thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5);
// Radius and transition speed for thumbs
$thumb-radius: $global-radius;
$thumb-transition-speed: 200ms;
```
{{/markdown}}
***
## Semantic Markup With Sass
You can create your own thumbnails using our own Sass mixins.
Basic
You can use the `thumb()` mixin to create your own thumbnails, like so:
SCSS
{{#markdown}}
```scss
.custom-thumbnail-class {
@include thumb;
}
```
{{/markdown}}
HTML
{{#markdown}}
```html
```
{{/markdown}}
Advanced
You can further customize your thumbnails using the provided options in the `thumb()` mixin:
SCSS
{{#markdown}}
```scss
.custom-thumbnail-class {
@include thumb(
// Width of border around thumbnail
$border-width: 2px,
// Box shadow to apply to thumbnail
$box-shadow: 0 0 0 1px rgba(#000,.2),
// Box shadow to apply on hover
$box-shadow-hover: 0 0 6px 1px rgba(#ccc,0.5)
);
}
```
{{/markdown}}
HTML
{{#markdown}}
```html
```
{{/markdown}}
***
### Sass Errors?
If the default "foundation" import was commented out, then make sure you import this file:
SCSS
{{#markdown}}
```scss
@import "foundation/components/thumbs";
```
{{/markdown}}