Thumbnail

Usage

Linked image

Copy  <a href="#" class="thumbnail">
    <img src="http://unsplash.it/201/201" />
  </a>

The thumbnail component has a display: inline-block by default.

Content wrapper

You can use any HTML markup within a thumbnail block. In the example below we use the .caption and .price-tag* classes to build a product card.

R$ 9.999 ,99 m

Copy<div class="thumbnail">
  <figure>
    <img src="http://unsplash.it/201/201" />
    <figcaption class="caption">
      <span class="additional"></span>
    </figcaption>
    <div class="price-tag">
      <span class="price-currency"></span>
      <span class="price-integer"></span>
      <span class="price-decimal"></span>
      <span class="price-unit"></span>
    </div>
  </figure>
</div>

Hover state

To achieve a simple hover effect on a thumbnail block, you can use the .thumbnail-hover class, as shown below.

R$ 9.999 ,99 m

Copy<div class="thumbnail thumbnail-hover">
  <figure>
    <img src="..." />
    <figcaption class="caption">
      <span class="additional"></span>
    </figcaption>
    <div class="price-tag">
      <span class="price-currency"></span>
      <span class="price-integer"></span>
      <span class="price-decimal"></span>
      <span class="price-unit"></span>
    </div>
  </figure>
</div>

*Read more about the price-tag component.