Semantic-UI Stacked Segments Group

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 Stacked Segments Group is used to stack a group of segments one above another. The segments appear to be stacked one above another.

Semantic UI Stacked Segments Group Classes:

stacked segments: The container with this class can contain segments that appear to be stacked from top to bottom.

Syntax: Create a container with stacked segments class and place the container segments inside it as follows:

<div class="ui stacked segments">
    <div class="ui segment">
        ...
    </div>
    ...
</div>

Example: In the following example, we have a list of segments that are stacked one upon another using the stacked segments.

HTML

<!DOCTYPE html>
<html>
  <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" />
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet"/>
    <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>
    <style>
      .icon {
        margin: 16px;
      }
    </style>
  </head>

  <body>
    <div class="ui container">
      <center>
        <div class="ui header green">
          <h1>
            GeeksforGeeks
          </h1>
        </div>
        <strong>
          Semantic UI Stacked Segments Group
        </strong>
      </center>
      <div class="ui stacked segments">
        <div class="ui 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 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 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>
    </div>
  </body>
</html>

Output

Reference: https://semantic-ui.com/elements/segment.html#stacked-segments

Semantic-UI Stacked Segments Group

Explore