Elements

If you can dream it, you can do it

Images

To create a styled image, use the uk-thumbnail class. The following are additional classes that you can use:

Style Description
uk-thumbnail creates a border around the image
uk-border-rounded creates an image with rounded corners
uk-thumbnail-expand Makes the image fill the entire width of the parent container

Image with thumbnail style


sample_1

markup
<img class="uk-thumbnail" src="images/demo/gallery/1.jpg" alt="sample_1" width="250" height="250">

Image with rounded corners style


sample_1
markup
<img class="uk-border-rounded" src="images/demo/gallery/1.jpg" alt="sample_1" width="250" height="250">

Image in circle


sample_1
markup
<img class="uk-border-circle" src="images/demo/gallery/1.jpg" alt="sample_1" width="250" height="250">

Image with caption

You can use the uk-thumbnail-caption class to apply a caption under the image.


sample_1
image caption


markup
<div class="uk-thumbnail">
  <img src="images/demo/gallery/1.jpg" alt="sample_1" width="275" height="182">
  <div class="uk-thumbnail-caption">image caption</div>
</div>

You can view more examples and classes that you can use from here

demo