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
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 por default.
Example
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
Markup
<div class="uk-thumbnail uk-thumbnail-expand">...</div>
Grelha
You can easily create a grid with thumbnails por using the Grelha 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>