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

\n\n

Usage

\n\n

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

\n\n

Example

\n\n
\n \n \n
\n
\n\n

Markup

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

Caption

\n\n

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

\n\n

Example

\n\n
\n
\n \n
Caption <div>
\n
\n \n \n
Caption <a>
\n
\n
\n \n
Caption <figure>
\n
\n
\n\n

Markup

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

Size modifiers

\n\n

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.

\n\n

Example

\n\n
\n
\n \n
.uk-thumbnail-large
\n
\n
\n
\n
\n \n
.uk-thumbnail-medium
\n
\n
\n \n
.uk-thumbnail-small
\n
\n
\n \n
.uk-thumbnail-mini
\n
\n
\n\n

Markup

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

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.\n\n

Example

\n\n
\n \n
.uk-thumbnail-expand
\n
\n\n

Markup

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

Grid

\n\n

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

\n\n

Example

\n\n
\n
\n
\n
\n
\n
\n
\n
\n
\n\n

Markup

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