Semantic-UI Label Colored Group
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 a variety of labels that can share colours together, this class allow the user to add shared colour to a group of labels. To add a colour to a label we need to include the name of the colour within the class.
Semantic UI Label Coloured Group Class:
- red: This class is used to set the red colour to the label.
- orange: This class is used to set the orange colour to the label.
- yellow: This class is used to set the yellow colour to the label.
- olive: This class is used to set the olive colour to the label.
- green: This class is used to set the green colour to the label.
- teal: This class is used to set the teal colour to the label.
- blue: This class is used to set the blue colour to the label.
- violet: This class is used to set the violet colour to the label.
- purple: This class is used to set the purple colour to the label.
- pink: This class is used to set the pink colour to the label.
- brown: This class is used to set the brown colour to the label.
- grey: This class is used to set the grey colour to the label.
- black: This class is used to set the black colour to the label.
Syntax:
<div class="ui Coloured-Group-Class labels"> <a class="ui label">...</a> <a class="ui label">...</a> ... ... </div>
Example 1: The following code demonstrates using labels class with any colour to it.
HTML
<!DOCTYPE html><html lang="en"> <head> <title>Semantic-UI Label Colored Group</title> <link rel="stylesheet" href= /> </head> <style> body { margin-left:10px; margin-right:10px; } </style> <body> <br/> <h1 class="ui header green">GeeksforGeeks</h1> <strong>Semantic UI Label Colored Group</strong> <br/><br/> <div class="ui olive labels"> <a class="ui label">Label 1</a> <br/> <a class="ui label">Label 2</a> </div> </body></html> |
Output:
Semantic-UI Label Colored Group
Example 2: To change the colour of the label, we have to add the colour in the class.
HTML
<!DOCTYPE html><html lang="en"> <head> <title>Semantic-UI Label Colored Group</title> <link rel="stylesheet" href= /> </head> <style> body { margin-left:10px; margin-right:10px; } </style> <body> <br/> <h1 class="ui header green">GeeksforGeeks</h1> <strong>Semantic UI Label Colored Group</strong> <br/><br/> <div class="ui green labels"> <a class="ui label">Group 1 Label 1</a> <br/> <a class="ui label">Group 1 Label 2</a> </div> <div class="ui yellow labels"> <a class="ui label">Group 2 Label 1</a> <br/> <a class="ui label">Group 2 Label 2</a> </div> </body></html> |
Output:
Semantic-UI Label Colored Group
Reference link: https://semantic-ui.com/elements/label.html#colored-group
Please Login to comment...