+92 3002806184 info@tscreators.com tscreators

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>

TSCreators is a team of designers and developers, provide the best quality web application, portals, mobile applications and portfolios for businesses and organizations. TSCreators is basically an organization that has dedicated its efforts to provide total satisfaction to our clients

Get in touch

Karachi Pakistan


+92 3002806184

info@tscreators.com

tscreators

Quick Feedback