Semantic-UI Image Groups
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.
Semantic UI provides us with a very easy way to style images. It offers images in different types like a normal image and image link and also different states like hidden, visible and also in different variations and states and even display elements in groups. Semantic UI Image Groups help us in displaying a group of images. In this article, we are going to learn about Semantic-UI Image Groups along with implementation using example code.
Semantic-UI Image Groups is a feature that enables us to display images in groups. Elements can be formatted in such a way that all the elements present in the group will have the same size.
- Size: All the images displayed will have the same size. We can simply add the class .mini, .tiny, .small, .medium, .large, .big, .huge and .massive classes to the group of images wrt size of the image required.
Syntax: The following is the syntax for a group of tiny-sized images. Change the class name related to the size of the image required.
<div class="ui size images"> <img class="ui image" src="...."> <img class="ui image" src="...."> ... </div>
Example 1: Since the class we used is tiny, we can observe tiny images in output.
Example 2: Since the class we used is small, we can observe small images in output.