Semantic-UI Piled 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 container used to place contents of the same type or same category. It is used to group related items. Semantic UI Piled Segments Group is used to pile a number of segments. The segments appear to be piled up. We get the borders and CSS of the piled items using this class.

Semantic UI Piled Segments Group Class:

piled segments: The container with this class can contain segments that are piled one above another with the CSS and borders around the segments.

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

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

Example: In the following example, we have three segments grouped as piled 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"/>   
    <style>
      .icon {
        margin: 16px;
      }
    </style>
  </head>

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

Semantic-UI Piled Segments Group

Explore