Semantic-UI Segment Variations

Last Updated : 22 Apr, 2022

Semantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.

Semantic UI Segment is a segment is a container used to place contents of the same type or same category. It is used to group related items.

Semantic UI Segment Variations:

Inverted: This is used to invert the color of the segment for creating contrast.
Attached: This is used to attach a segment to other content on any page.
Padded: This is used to give padding to the segment.
Compact: This is used to generate a segment that covers as much space as it is needed.
Colored: This is used to color a segment.
Emphasis: This is used to make a segment to be more or less emphasized.
Circular: This is used to make a circular segment.
Clearing: This is used to clear the float of a segment.
Floated: This is used to align a segment to the left or right of the segment.
Text Alignment: This is used to align a text of the segment on either side or center.
Basic: This is used to create a segment that has no special formatting other than padding around it.

Syntax:

<div class="ui segment-variation-name segment">
   .......
</div>

Example 1: Below is the code that demonstrates the use of Segment Variation inverted Class.

HTML

<!DOCTYPE html>
<html>

<head>
  <title>
    Semantic-UI Segment Variation
  </title>
  <link rel="stylesheet"
        href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
</head>

<body style="margin-inline: 40rem;">
  <center>
    <h1 class="ui green header">
      GeeksforGeeks
    </h1>

    <h3>
        Semantic-UI Segment Variation
    </h3>
  </center>

  <div class="ui inverted segment">
    

<p>GeeksforGeeks is a computer science portal.</p>


  </div>
</body>

</html>

Output:

Example 2: Below is the code that demonstrates the use of Segment Variation attached Class.

HTML

<!DOCTYPE html>
<html>

<head>
  <title>
    Semantic-UI Segment Variation
  </title>
  <link rel="stylesheet" 
        href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
</head>

<body style="margin-inline: 40rem;">
  <center>
    <h1 class="ui green header">
        GeeksforGeeks
    </h1>

    <h3>
        Semantic-UI Segment Variation
    </h3>
  </center>
  <div class="ui top attached segment">
    
<p>Topmost attached segment</p>

  </div>
  <div class="ui attached segment">
    
<p>Both sides attached segment</p>


  </div>
  <div class="ui bottom attached segment">
    
<p>Bottommost attached segment</p>

  </div>
</body>

</html>

Output:

Example 3: Below is the code that demonstrates the use of Segment Variation padded Class.

HTML

<!DOCTYPE html>
<html>
<head>
  <title>
    Semantic-UI Segment Variation
  </title>
  <link rel="stylesheet"
        href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
</head>

<body style="margin-inline: 40rem;">
  <center>
    <h1 class="ui green header">
      GeeksforGeeks
    </h1>

    <h3>
        Semantic-UI Segment Variation
    </h3>
  </center>
  <div class="ui padded segment">
    
<p>GeeksforGeeks is a Computer Science portal!</p>

  </div>

  <div class="ui very padded segment">
    
<p>GeeksforGeeks is a Computer Science portal!</p>

  </div>
</body>
</html>

Output:

Example 4: Below is the code that demonstrates the use of Segment Variation compact Class.

HTML

<!DOCTYPE html>
<html>

<head>
  <title>
    Semantic-UI Segment Variation
  </title>
  <link rel="stylesheet" 
        href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
</head>

<body style="margin-inline: 60rem;">
  <center>
    <h1 class="ui green header">
      GeeksforGeeks
    </h1>

    <h3>
        Semantic-UI Segment Variation
    </h3>
  </center>
  <div class="ui compact segments">
    <div class="ui segment">
      
<p>GeeksforGeeks</p>

    </div>
    <div class="ui segment">
      
<p>It is a Computer Science Portal!</p>

    </div>
  </div>
</body>
</html>

Output:

Example 5: Below is the code that demonstrates the use of Segment Variation colored Class.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Semantic-UI Segment Variations  </title>
    <link rel="stylesheet"
          href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </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>

</body>

</html>

Output:

Example 6: Below is the code that demonstrates the use of Segment Variation emphasis Class.

HTML

<!DOCTYPE html>
<html>

<head>
  <title>
    Semantic-UI Segment Variation
  </title>

  <link rel="stylesheet"
        href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
</head>

<body style="margin-inline: 30rem;">
  <center>
    <h1 class="ui green header">
      GeeksforGeeks
    </h1>

    <h3>
      Semantic-UI Segment Variation
    </h3>
  </center>
  <div class="ui inverted segment">
    
<p>GeeksforGeeks.</p>

  </div>
  
  <div class="ui secondary inverted segment">
    
<p>It is a Computer Science Portal</p>

  </div>
  
  <div class="ui tertiary inverted segment">
    
<p>For all Geeks and professionals!</p>

  </div>
</body>

</html>

Output:

Example 7: Below is the code that demonstrates the use of the Segment Variation circular Class.

HTML

<!DOCTYPE html>
<html>

<head>
  <title>
    Semantic-UI Segment Variation
  </title>

  <link rel="stylesheet"
        href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
  <style>
    .circular{
      height: 80px;
      width: 80px;
    }
  </style>
</head>

<body style="margin-inline: 50rem;">
  <center>
    <h1 class="ui green header">
      GeeksforGeeks
    </h1>

    <h3>
      Semantic-UI Segment Variation
    </h3>
  </center>

  <div class="ui inverted circular segment">
      <h2 class="ui inverted header">
        Complete Interview Preparation
      <div class="sub header">Rs 5000/-</div>
    </h2>
  </div>
  
  <div class="ui circular segment">
    <h2 class="ui header">
      DSA-Self Paced
    <div class="sub header">Rs 3000/-</div>
  </h2>
</div>
</body>

</html>

Output:

Example 8: Below is the code that demonstrates the use of Segment Variation clearing Class.

HTML

<!DOCTYPE html>
<html>

<head>
  <title>
    Semantic-UI Segment Variation
  </title>

  <link rel="stylesheet" 
        href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
</head>
<body style="margin-inline: 50rem;">
  <center>
    <h1 class="ui green header">
      GeeksforGeeks
    </h1>
    <h3>
      Semantic-UI Segment Variation
    </h3>
  </center>
  <div class="ui clearing segment">
    <div class="ui left green floated button">
      Floated
    </div>
  </div>
</body>

</html>

Output:

Example 9: Below is the code that demonstrates the use of Segment Variation floated Class.

HTML

<!DOCTYPE html>
<html>

<head>
  <title>
    Semantic-UI Segment Variation
  </title>
  <link rel="stylesheet" 
        href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
</head>

<body style="margin-inline: 40rem;">
  <center>
    <h1 class="ui green header">
      GeeksforGeeks
    </h1>

    <h3>
        Semantic-UI Segment Variation
    </h3>
  </center>
  <div class="ui right floated segment">
    
<p>
      Left Segment
    </p>


  </div>
  <div class="ui left floated segment">
    Right Segment
  </div>
</body>
</html>

Output:

Example 10: Below is the code that demonstrates the use of Segment Variation text-alignment Class.

HTML

<!DOCTYPE html>
<html>

<head>
  <title>
    Semantic-UI Segment Variation
  </title>
  <link rel="stylesheet"
        href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/>
</head>

<body style="margin-inline: 40rem;">
  <center>
    <h1 class="ui green header">
      GeeksforGeeks
    </h1>

    <h3>
        Semantic-UI Segment Variation
    </h3>
  </center>
  <div class="ui left aligned segment">
    Left-GeeksforGeeks
  </div>

  <div class="ui center aligned segment">
    Center-GeeksforGeeks
  </div>

  <div class="ui right aligned segment">
    Right-GeeksforGeeks
  </div>
</body>

</html>

Output:

Example 11: Below is the code that demonstrates the use of Segment Variation basic Class.

HTML

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" 
          href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>

<body>
    <div class="ui container">
        <center>
            <div class="ui header green">
                <h1>
                    GeeksforGeeks
                </h1>
            </div>
            <strong>
                Semantic UI Segment Basic Variation
            </strong>
            <br />
            <br />
            <button class="ui inverted green button"
                    onclick="toggleBasicVariation()">
                Toggle Basic Variation
            </button>
        </center>

        <div class="ui basic segment">
            <h3>Data Structures</h3>
            <ul class="ui bulleted list">
                <li class="item">Stack</li>
                <li class="item">Heap</li>
                <li class="item">Array</li>
            </ul>
        </div>
        <div class="ui basic segment">
            <h3>Algorithms</h3>
            <ul class="ui bulleted list">
                <li class="item">Searching</li>
                <li class="item">Sorting</li>
                <li class="item">Graph</li>
            </ul>
        </div>
        <div class="ui basic segment">
            <h3>Programming Languages</h3>
            <ul class="ui bulleted list">
                <li class="item">Java</li>
                <li class="item">C++</li>
                <li class="item">Python</li>
            </ul>
        </div>
    </div>
    <script>
        const toggleBasicVariation = () => {
            $('.ui.segment').toggleClass('basic')
        }
    </script>
</body>

</html>