Skip to content
Related Articles

Related Articles

Semantic-UI Segment Piled Type

View Discussion
Improve Article
Save Article
  • Last Updated : 11 Mar, 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 Piled Type is used to display the segment piled. The segment has a special type of formatting with borders appearing piled.

Semantic UI Segment Piled Type Class:

  • piled: Add the class to the segment and it will appear as piled.

Syntax: Add the piled class to the segment as follows:

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

Example: In the following example, we have three segments as piled type.

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=
          rel="stylesheet"/>
    <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 Piled Type
        </strong>
        <br />
        <br />
        <button
          class="ui inverted green button"
          onclick="togglePiledVariation()"
        >
          Toggle Piled Type
        </button>
      </center>
  
      <div class="ui piled 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 piled 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 piled 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 togglePiledVariation = () => {
        $('.ui.segment').toggleClass('piled')
      }
    </script>
  </body>
</html>


Output

Semantic-UI Segment Piled Type

Semantic-UI Segment Piled Type

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!