Skip to content
Related Articles

Related Articles

Semantic-UI Segment Variations

View Discussion
Improve Article
Save Article
  • Last Updated : 22 Apr, 2022
View Discussion
Improve Article
Save Article

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=
</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:

Semantic-UI Segment Variations

Semantic-UI Segment Variations

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=
</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:

Semantic-UI Segment Variations

Semantic-UI Segment Variations

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=
</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:

Semantic-UI Segment Variations

Semantic-UI Segment Variations

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=
</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:

Semantic-UI Segment Variations

Semantic-UI Segment Variations

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=
    <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>
 
</body>
 
</html>


Output:

Semantic-UI Segment Variations

Semantic-UI Segment Variations

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=
</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:

Semantic-UI Segment Variations

Semantic-UI Segment Variations

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=
  <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:

Semantic-UI Segment Variations

Semantic-UI Segment Variations

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=
</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:

Semantic-UI Segment Variations

Semantic-UI Segment Variations

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=
</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:

Semantic-UI Segment Variations

Semantic-UI Segment Variations

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=
</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:

Semantic-UI Segment Variations

Semantic-UI Segment Variations

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

HTML




<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet"
          href=
    <script src=
    </script>
    <script src=
    </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>


Output:

Semantic-UI Segment Variations

Semantic-UI Segment Variations

Reference link: https://semantic-ui.com/elements/segment.html#inverted


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!