[heading size=”h2″ style=”uk-module-title”]Images[/heading]
To create an image, use the image shortcode. You can use the [thumbnail_caption] shortcode to apply a caption under an image.
| Style | Description |
|---|---|
uk-thumbnail |
creates a border around the image |
uk-border-rounded |
creates an image with rounded corners |
uk-border-circle |
creates an image which is round |
uk-thumbnail-expand |
Makes the image fill the entire width of the parent container |
[line_break/][line_break/] [heading size=”h3″ style=”uk-module-title”]Image with thumbnail style[/heading] [line_break/] [image style=”uk-thumbnail” src=”images/demo/gallery/2.jpg” alt=”sample_1″ width=”250″ height=”250″/][line_break/] [line_break/] [badge style=”note”]markup[/badge] [code][image style=”uk-thumbnail” src=”images/demo/gallery/2.jpg” alt=”sample_1″ width=”250″ height=”250″/][/code] [line_break/] [heading size=”h3″ style=”uk-module-title”]Image with rounded corners style[/heading] [line_break/] [image style=”uk-border-rounded” src=”images/demo/gallery/2.jpg” alt=”sample_1″ width=”250″ height=”250″/][line_break/] [line_break/][line_break/] [badge style=”note”]markup[/badge] [code][image style=”uk-border-rounded” src=”images/demo/gallery/2.jpg” alt=”sample_1″ width=”250″ height=”250″/][/code] [line_break/] [heading size=”h3″ style=”uk-module-title”]Image in circle[/heading] [line_break/] [image style=”uk-border-circle” src=”images/demo/gallery/2.jpg” alt=”sample_1″ width=”250″ height=”250″/][line_break/] [line_break/][line_break/] [badge style=”note”]markup[/badge] [code][image style=”uk-border-circle” src=”images/demo/gallery/2.jpg” alt=”sample_1″ width=”250″ height=”250″/][/code] [line_break/] [heading size=”h3″ style=”uk-module-title”]Image with caption[/heading]
You can use the [thumbnail_caption] shortcode to apply a caption under the image.
[thumbnail_caption caption=”image caption”] [image style=”” src=”images/demo/gallery/2.jpg” alt=”sample_1″ width=”250″ height=”250″/] [/thumbnail_caption] [line_break/] [line_break/] [badge style=”note”]markup[/badge] [code][thumbnail_caption caption=”image caption”] [image style=”” src=”images/demo/gallery/2.jpg” alt=”sample_1″ width=”250″ height=”250″/] [/thumbnail_caption][/code]
You can view more examples and classes that you can use from here
