Semantic-UI Label Corner Type
Semantic UI is a framework that is used to build a great user interface. It is an open-source framework that uses CSS and jQuery. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.
A Semantic UI label is used to create meaningful content classifications. In this article, we will learn to use the Semantic-UI Label Corner Type of the Semantic UI framework. The Semantic-UI Label Corner Type is used to add the position of the label to the corner of an element.
Semantic-UI Label Corner Type Classes:
- left corner: This class is used to add labels to the left corner.
- right corner: This class is used to add labels to the right corner.
Example 1: This example describes the uses of Semantic-UI Label Corner Type.
HTML
<!DOCTYPE html> < html > < head > < title > Semantic-UI Label Corner Type </ title > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </ head > < body > < div class = "ui container center aligned" > < h2 style = "color:green" > w3wiki </ h2 > < h3 >Semantic-UI Label Corner Type</ h3 > < div class = "ui four column grid" > < div class = "column" > < div class = "ui fluid image" > < a class = "ui left corner label" > < i class = "edit icon" ></ i > </ a > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png" > </ div > </ div > < div class = "column" > < div class = "ui fluid image" > < a class = "ui right corner label" > < i class = "save icon" ></ i > </ a > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20210203171024/CSSTutorial.png" > </ div > </ div > < div class = "column" > < div class = "ui fluid image" > < a class = "ui left corner label" > < i class = "eraser icon" ></ i > </ a > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20210322182259/BootstrapTutorial.png" > </ div > </ div > < div class = "column" > < div class = "ui fluid image" > < a class = "ui right corner label" > < i class = "cut icon" ></ i > </ a > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20210210175213/JavaScriptTutorial.png" > </ div > </ div > </ div > </ div > </ body > </ html > |
Output:
Example 2: This example describes the uses of Semantic-UI Label Corner Type with color and size variations.
HTML
<!DOCTYPE html> < html > < head > < title > Semantic-UI Label Corner Type </ title > < link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> </ head > < body > < div class = "ui container center aligned" > < h2 style = "color:green" > w3wiki </ h2 > < h3 >Semantic-UI Label Corner Type</ h3 > < div class = "ui four column grid" > < div class = "column" > < div class = "ui fluid image" > < a class = "ui left corner green large label" > < i class = "edit icon" ></ i > </ a > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20210203170945/HTML-Tutorials.png" > </ div > </ div > < div class = "column" > < div class = "ui fluid image" > < a class = "ui right corner red tiny label" > < i class = "save icon" ></ i > </ a > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20210203171024/CSSTutorial.png" > </ div > </ div > < div class = "column" > < div class = "ui fluid image" > < a class = "ui left corner yellow big label" > < i class = "eraser icon" ></ i > </ a > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20210322182259/BootstrapTutorial.png" > </ div > </ div > < div class = "column" > < div class = "ui fluid image" > < a class = "ui right corner blue mini label" > < i class = "cut icon" ></ i > </ a > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20210210175213/JavaScriptTutorial.png" > </ div > </ div > </ div > </ div > </ body > </ html > |
Output:
Reference: https://semantic-ui.com/elements/label.html#corner