Semantic-UI Label 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. The best part about this framework is that it creates beautiful and responsive layouts as it contains pre-built semantic components.
A label is an important component of our website as it displays content information to the user. Now, these labels can be created in various ways and can have different looks and feel like a colored label, a label in form of a tag, a circular label, etc. These can be achieved with the help of label groups.
Semantic UI Label Groups: There are four types of Label Groups in the Semantic UI.
- Group Size: Multiple Labels can have the same sizes together.
- Colored Group: Multiple Labels can have the same colors together.
- Tag Group: Multiple Labels can contain a tag format.
- Circular Group: Multiple Labels can have a circular shape.
<div class="ui Label-groups labels"> <a class="ui label"> .... </a> .... </div>
Note: The syntax for the other label groups is the same and the only difference is the name of the label group that has to be replaced accordingly. In the case of colored group and group size, we have to write the name of the color or specify the size respectively in place of the name of the label group.
Example 1: In the following program, we will be using the Group Size and Colored Group Label Groups. The developer can use different sizes like mini, tiny, huge, massive, and different colors as per the application’s need.
Example 2: In the following program, we will be using the tag group and circular group label groups.