Thumbnails

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

<a class="th" href="../img/demos/demo2.png"> <img src="../img/demos/demo2-th.png"> </a>

Rendered HTML


Accessibility

Here's how to use aria-label, role, and aria-hidden to make your thumbnails accessible.

HTML

<a class="th" role="button" aria-label="Thumbnail" href="../assets/img/examples/space.jpg"> <img aria-hidden=true src="../assets/img/examples/space-th-sm.jpg"/> </a>

Rendered HTML


Advanced

Additional classes can be added to your thumbnails to change its appearance.

HTML

<a class="th [radius]" href="#"> <img src="../assets/img/examples/earth-th-sm.jpg"> </a>

Rendered HTML


Customize with Sass

Thumbnails can be easily customized using our Sass variables.

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;

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

.custom-thumbnail-class { @include thumb; }

HTML

<a class="custom-thumbnail-class" href="../assets/img/examples/space.jpg"> <img src="../assets/img/examples/space-th-sm.jpg"> </a>

Advanced

You can further customize your thumbnails using the provided options in the thumb() mixin:

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

HTML

<a class="custom-thumbnail-class" href="../assets/img/examples/launch.jpg"> <img src="../assets/img/examples/launch-th.jpg"> </a>

Sass Errors?

If the default "foundation" import was commented out, then make sure you import this file:

SCSS

@import "foundation/components/thumbs";




Building Blocks Using Thumbnails


Want more? Check out all the hot Building Blocks ⇨

Stay on top of what’s happening in responsive design.

Sign up to receive monthly Responsive Reading highlights. Read Last Month's Edition »