Open In App

Semantic-UI Segment Groups

Last Updated : 12 Apr, 2025
Summarize
Comments
Improve
Suggest changes
Share
Like Article
Like
Report

Semantic UI is an open-source framework that is used to create the best CSS user interfaces. With this framework, you can create beautiful, responsive layouts for your web application just by using simple HTML. In semantic UI, a group of segments can be added together to make a group-like structure.

Semantic UI Segments Group Classes:

  • segments- This class is used to create segments group in semantic UI.
  • horizontal segments- This class is used to create horizontal segment groups in semantic UI.
  • raised segments- This class is used to create raised segment groups in semantic UI.
  • stacked segments- This class is used to create stacked segment groups in semantic UI.
  • piled segments- This class is used to create piled segment groups in semantic UI.

Syntax:

<div class="ui segments | horizontal segments | 
    raised segments | stacked segments | piled segments">
    <div class="ui segment">
        ...
    </div>
    ...
</div>

Example 1: Below example illustrates the color segment group.

HTML 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="ui container">
      <h1 class="ui green header">GeeksforGeeks</h1>

      <h2>Colored Segment Group</h2>
      <div class="ui segments">
        <div class="ui segment">
          
<p>Java</p>

        </div>
        <div class="ui red segment">
          
<p>Python</p>

        </div>
        <div class="ui blue segment">
          
<p>C++</p>

        </div>
        <div class="ui green segment">
          
<p>Middle</p>

        </div>
        <div class="ui yellow segment">
          
<p>Bottom</p>

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

Output:

Example 2: Below example illustrates the nested segment group.

HTML 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" 
    content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="ui container">
      <h1 class="ui green header">GeeksforGeeks</h1>

      <h2>Nested Segment Group</h2>
      <div class="ui segments">
        <div class="ui segment">
          
<p>Available Courses</p>

        </div>
        <div class="ui segments">
          <div class="ui segment">
            
<p>C++</p>

          </div>
          <div class="ui segment">
            
<p>Data Structures using C++</p>

          </div>
          <div class="ui segment">
            
<p>Python</p>

          </div>
        </div>
        <div class="ui horizontal segments">
          <div class="ui segment">
            
<p>Jobs</p>

          </div>
          <div class="ui segment">
            
<p>Competitive Programming</p>

          </div>
          <div class="ui segment">
            
<p>Coding Competitions</p>

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

Output:

Example 3: Below example illustrates the horizontal segment group.

HTML 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" 
    content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="ui container">
      <h1 class="ui green header">GeeksforGeeks</h1>

      <h2>Horizontal Segment Group</h2>
      <div class="ui horizontal segments">
        <div class="ui segment">
          
<p>Github</p>

        </div>
        <div class="ui segment">
          
<p>Facebook</p>

        </div>
        <div class="ui segment">
          
<p>Linkedin</p>

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

Output:

Example 4: Below example illustrates the raised segment group.

HTML 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" 
    content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="ui container">
      <h1 class="ui green header">GeeksforGeeks</h1>
      <h2>Raised Segment Group</h2>
      <div class="ui raised segments">
        <div class="ui segment">
          
<p>GSOC</p>

        </div>
        <div class="ui segment">
          
<p>Winter of Code</p>

        </div>
        <div class="ui segment">
          
<p>GSOD</p>

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

Output:

Example 5: Below example illustrates the stacked segment group.

HTML 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="ui container">
      <h1 class="ui green header">GeeksforGeeks</h1>
      <h2>Stacked Segment Group</h2>
      <div class="ui stacked segments">
        <div class="ui segment">
          
<p>Tutorials</p>

        </div>
        <div class="ui segment">
          
<p>Articles</p>

        </div>
        <div class="ui segment">
          
<p>Video Courses</p>

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

Output:

Example 6: Below example illustrates the piled segment group.

HTML 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div class="ui container">
      <h1 class="ui green header">GeeksforGeeks</h1>

      <h2>Piled Segment Group</h2>
      <div class="ui piled segments">
        <div class="ui segment">
          
<p>Fork Java</p>

        </div>
        <div class="ui segment">
          
<p>Data Structures using Java</p>

        </div>
        <div class="ui segment">
          
<p>Frontend using ReactJS</p>

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

Output:



Next Article
Semantic UI

T
tarunsinghwap7
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox