Thumbnail

Create different thumbnail images, which come in various styles and sizes.


Usage

To apply this component, just add the .thumbnail class to an <img>, <a> or <figure> element.

Usage

  • <!-- .thumbnail applied to an `img` element -->
    <img class="thumbnail" src="">
    
    <!-- !pplied to an `a` tag -->
    <a class="thumbnail" href="#">
        <img src="">
    </a>
    
    <!-- Applied to a parent `figure` tag -->
    <figure class="thumbnail">
        <img src="">
    </figure>

Caption

Add the .thumbnail-caption class to a <div> element to apply a text caption under the image.

Usage

  • Caption on a <div>
    Caption on an <a> tag
    Caption on a <figure>
  • <div class="margin" data-margin>
        <div class="thumbnail">
            <img src="">
            <div class="thumbnail-caption">...</div>
        </div>
        <a class="thumbnail" href="#">
            <img src="">
            <div class="thumbnail-caption">...</div>
        </a>
        <figure class="thumbnail">
            <img src="">
            <figcaption class="thumbnail-caption">...</figcaption>
        </figure>
    </div>

Size modifiers

Apply the .thumbnail-large, .thumbnail-medium, .thumbnail-small or .thumbnail-mini classes to resize images. The Base component is required to make the images responsive by default.

Class CSS Description
.thumbnail-expand width: 100%; Expands width of element and child img to 100% of the container width.
.thumbnail-large width: 400px; Sets width of .thumbnail element to 400px.
.thumbnail-medium width: 300px; Sets width of .thumbnail element to 300px.
.thumbnail-small width: 200px; Sets width of .thumbnail element to 200px.
.thumbnail-mini width: 150px; Sets width of .thumbnail element to 150px.

Usage

  • .thumbnail-expand
  • <div class="thumbnail thumbnail-expand">
        <img src="">
        <div class="thumbnail-caption">...</div>
    </div>

Usage

  • .thumbnail-large
  • <div class="thumbnail thumbnail-large">
        <img src="">
        <div class="thumbnail-caption">...</div>
    </div>

Usage

  • .thumbnail-medium
  • <div class="thumbnail thumbnail-medium">
        <img src="">
        <div class="thumbnail-caption">...</div>
    </div>

Usage

  • .thumbnail-small
  • <div class="thumbnail thumbnail-small">
        <img src="">
        <div class="thumbnail-caption">...</div>
    </div>

Usage

  • .thumbnail-mini
  • <div class="thumbnail thumbnail-mini">
        <img src="">
        <div class="thumbnail-caption">...</div>
    </div>