Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.
Semantic UI provides the users various coloured segment classes to place them on the website and look the segments more beautiful. In this article, we will learn about Segment Coloured Variation.
Semantic UI Segment Coloured Variation Classes:
- red: This sets the segment colour as red.
- orange: This sets the segment colour like orange.
- yellow: This sets the segment colour as yellow.
- olive: This sets the segment colour as olive.
- green: This sets the segment colour as green.
- teal: This sets the segment colour as teal.
- blue: This sets the segment colour as blue.
- violet: This sets the segment colour as violet.
- purple: This sets the segment colour as purple.
- pink: This sets the segment colour like pink.
- brown: This sets the segment colour as brown.
- grey: This sets the segment colour like grey.
- black: This sets the segment colour as black.
- inverted: This sets the inverted colour segment.
Syntax:
<div class="ui color .... segment"></div>
Example 1: The following code demonstrates the segment coloured variation classes.
<!DOCTYPE html> <html>
<head>
<title>Semantic-UI Segment Colored Variation</title>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">
Geeksforgeeks
</h1>
<strong>
Semantic-UI Segment Color Variations
</strong>
<br />
<br />
<div class=" ui container">
<div class="ui blue segment">Blue</div>
<div class="ui violet segment">Violet</div>
<div class="ui purple segment">Purple</div>
<div class="ui pink segment">Pink</div>
<div class="ui black segment">Black</div>
</div>
</center>
</body>
</html>
|
Output:
Semantic-UI Segment Colored Variation
Example 2: The following code demonstrates the inverted segment coloured variation classes.
<!DOCTYPE html> <html>
<head>
<title>Semantic-UI Segment Colored Variation</title>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<center>
<h1 class="ui green header">Geeksforgeeks</h1>
<strong>
Semantic-UI Segment Color Variations
</strong>
<br />
<br />
<div class=" ui container">
<div class="ui violet inverted segment">
Violet
</div>
<div class="ui purple inverted segment">
Purple
</div>
<div class="ui pink inverted segment">
Pink
</div>
<div class="ui brown inverted segment">
Brown
</div>
<div class="ui black inverted segment">
Black
</div>
</div>
</center>
<script src=
</script>
</body>
</html>
|
Output:
Semantic-UI Segment Colored Variation
Reference: https://semantic-ui.com/elements/segment.html#colored