# Thumbnail

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

## Usage

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

### Example

### Markup

    <!-- This is an image as a thumbnail -->
    <img class="uk-thumbnail" src="" alt="">

    <!-- This is an anchor as a thumbnail -->
    <a class="uk-thumbnail" href=""><img src="" alt=""></a>

    <!-- This is a figure as a thumbnail -->
    <figure class="uk-thumbnail"><img src="" alt=""></figure>

### Caption

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

#### Example

Caption `<div>`
Caption `<a>`
Caption `<figure>`

#### Markup

    <!-- This is a div as a thumbnail with a caption -->
    <div class="uk-thumbnail">
        <img src="" alt="">
        <div class="uk-thumbnail-caption">...</div>
    </div>

    <!-- This is an anchor as a thumbnail with a caption -->
    <a class="uk-thumbnail" href="">
        <img src="" alt="">
        <div class="uk-thumbnail-caption">...</div>
    </a>

    <!-- This is a figure as a thumbnail with a caption -->
    <figure class="uk-thumbnail">
        <img src="" alt="">
        <figcaption class="uk-thumbnail-caption">...</figcaption>
    </figure>

## Size modifiers

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

### Example

`.uk-thumbnail-large`
`.uk-thumbnail-medium`
`.uk-thumbnail-small`
`.uk-thumbnail-mini`

### Markup

    <div class="uk-thumbnail uk-thumbnail-large">...</div>
    <div class="uk-thumbnail uk-thumbnail-medium">...</div>
    <div class="uk-thumbnail uk-thumbnail-small">...</div>
    <div class="uk-thumbnail uk-thumbnail-mini">...</div>

You can even scale a thumbnail beyond its proper size, so that it extends to the full width of its parent element. Just add the `.uk-thumbnail-expand` class.

### Example

`.uk-thumbnail-expand`

### Markup

    <div class="uk-thumbnail uk-thumbnail-expand">...</div>

## Grid

You can easily create a grid with thumbnails by using the Grid component.

### Example

### Markup

    <div class="uk-grid">
        <div class="uk-width-medium-1-2"><img class="uk-thumbnail" src="" alt=""></div>
        <div class="uk-width-medium-1-2">
            <div class="uk-grid">
                <div class="uk-width-medium-1-2"><img class="uk-thumbnail" src="" alt=""></div>
                <div class="uk-width-medium-1-2"><img class="uk-thumbnail" src="" alt=""></div>
            </div>
        </div>
    </div>