Thumbnails

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

Basic

You can create a thumbnail image using minimal markup.

HTML

<aclass="th"href="../img/demos/demo2.png"><imgsrc="../img/demos/demo2-th.png"></a>

Rendered HTML

Accessibility

Here's how to usearia-label,role, andaria-hidden to make your thumbnails accessible.

HTML

<aclass="th"role="button"aria-label="Thumbnail"href="../assets/img/examples/space.jpg"><imgaria-hidden=truesrc="../assets/img/examples/space-th-sm.jpg"/></a>

Rendered HTML

Advanced

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

HTML

<aclass="th [radius]"href="#"><imgsrc="../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:0001px rgba($black,.2);$thumb-box-shadow-hover:006px1px 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 thethumb() mixin to create your own thumbnails, like so:

SCSS

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

HTML

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

Advanced

You can further customize your thumbnails using the provided options in thethumb() 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

<aclass="custom-thumbnail-class"href="../assets/img/examples/launch.jpg"><imgsrc="../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";