--- title: Thumbnails layout: component.html ---

If you're going to use an image as an anchor, we've got you covered. All you gotta do is wrap an `a.th` around your image and voilà!

*** ***

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}}