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.

---

Accessibility

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

---

Advanced

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

---

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 ⇨