Semantic-UI Label Content
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 that displays information to the user. Now, these labels can be created in various ways and can have different looks and feel. We can create a label with an icon beside it, with an image beside it and etc. This can be achieved with the help of Label Content which provides various properties to our Label.
Semantic UI Label Content:
- Detail: If we want our label to display any detailed message then Detail Label Content is used. It displays the detail of the label.
- Icon: If we want our label to display an icon then Icon Label Content is used. This label displays the selected icon.
- Image: If we want our label to display any particular image then Image Label Content is used. This label displays the selected image.
- Link: If we want our label to be in a form of a link then Link Label Content is used. This label is in the form of a link.
<div class="ui label"> <div class="label-content"> ... </div> </div>
Example 1: In the following example, we will be using the Detail and Icon Label Content Classes.
Example 2: In the following example, we will be using the Image and Link Label Content Classes.