Semantic-UI Segment Inverted Variation
Last Updated :
15 Mar, 2022
Semantic UI is an open-source framework that offers a variety of components to make your UI more meaningful. One of them is “Segment”.
Semantic UI has a segment component to display different sections of relatable content. Users can also display the segments on a dark background. Let us see this variation of a segment.
Semantic UI Segment Inverted Variation: If you want to display a segment on black background, you can make use of an inverted segment. A single or group of segments showing relatable content can be displayed in dark background. We will create a UI to show the segment inverted variation.
Semantic-UI Segment Inverted Variation Class:
- inverted: This class is used to make the segment inverted (color-wise).
Syntax :
<div class="ui inverted segment">
...
</div>
These examples demonstrate a segment or group of segments in inverted variation by using the inverted class.
Example 1:
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "ui container" >
< br />< br />
< h2 class = "ui header green" >GeeksforGeeks</ h2 >
< strong >Semantic UI Segment Inverted Variation</ strong >
</ br >
< hr >< br />
< div class = "ui inverted segment" >
< center >
< h3 >Welcome to geeksforgeeks.</ h3 >
< p >Learn anything you want</ p >
< p >
Get tutorial of anything
related to computer science.
</ p >
< p >Courses on programming</ p >
< p >Solve programming problems.</ p >
< p >Help other by writing articles.</ p >
</ center >
</ div >
</ div >
</ body >
</ html >
|
Output:
Inverted Segment
Example 2:
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
</ head >
< body >
< div class = "ui container" >
< br />< br />
< h2 class = "ui header green" >GeeksforGeeks</ h2 >
< strong >Semantic UI Segment Inverted Variation</ strong >
</ br >
< hr >< br />
< div class = "ui inverted segments" >
< div class = "ui inverted segment" >
< p >Data Structure</ p >
</ div >
< div class = "ui inverted green segment" >
< p >Web Programming</ p >
</ div >
< div class = "ui inverted segment" >
< p >Competitive Programming</ p >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Inverted Segments
Reference link: https://semantic-ui.com/elements/segment.html#inverted
Share your thoughts in the comments
Please Login to comment...