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=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</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=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</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>