Thumbnail

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 --><imgclass="uk-thumbnail"src=""alt=""><!-- This is an anchor as a thumbnail --><aclass="uk-thumbnail"href=""><imgsrc=""alt=""></a><!-- This is a figure as a thumbnail --><figureclass="uk-thumbnail"><imgsrc=""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 --><divclass="uk-thumbnail"><imgsrc=""alt=""><divclass="uk-thumbnail-caption">...</div></div><!-- This is an anchor as a thumbnail with a caption --><aclass="uk-thumbnail"href=""><imgsrc=""alt=""><divclass="uk-thumbnail-caption">...</div></a><!-- This is a figure as a thumbnail with a caption --><figureclass="uk-thumbnail"><imgsrc=""alt=""><figcaptionclass="uk-thumbnail-caption">...</figcaption></figure>