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
Last Updated :
28 Feb, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...