Semantic-UI Segment Piled Type Last Updated : 11 Mar, 2022 Comments Improve Suggest changes Like Article Like Report 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= "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> </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 Reference: https://semantic-ui.com/elements/segment.html#piled Comment More infoAdvertise with us Next Article Software Developer (SDE) Interview/Placement Preparation Guide R RajeevSarkar Follow Improve Article Tags : Web Technologies CSS Semantic-UI Semantic-UI Elements Similar Reads Interview Preparation Interview Preparation For Software Developers Must Coding Questions - Company-wise Must Do Coding Questions - Topic-wise Company-wise Practice Problems Company Preparation Competitive Programming Software Design-Patterns Company-wise Interview Experience Experienced - Interview Experiences Internship - Interview Experiences Practice @Geeksforgeeks Problem of the Day Topic-wise Practice Difficulty Level - School Difficulty Level - Basic Difficulty Level - Easy Difficulty Level - Medium Difficulty Level - Hard Leaderboard !! Explore More... Data Structures Arrays Linked List Stack Queue Binary Tree Binary Search Tree Heap Hashing Graph Advance Data Structures Matrix String All Data Structures Algorithms Analysis of Algorithms Searching Algorithms Sorting Algorithms Pattern Searching Geometric Algorithms Mathematical Algorithms Randomized Algorithms Greedy Algorithms Dynamic Programming Divide & Conquer Backtracking Branch & Bound All Algorithms Programming Languages C C++ Java Python C# Go Lang SQL PHP Scala Perl Kotlin Web Technologies HTML CSS JavaScript Bootstrap Tailwind CSS AngularJS ReactJS jQuery NodeJS PHP Web Design Web Browser File Formats Computer Science Subjects Operating Systems DBMS Computer Network Computer Organization & Architecture TOC Compiler Design Digital Elec. & Logic Design Software Engineering Engineering Mathematics Data Science & ML Complete Data Science Course Data Science Tutorial Machine Learning Tutorial Deep Learning Tutorial NLP Tutorial Machine Learning Projects Data Analysis Tutorial Tutorial Library Python Tutorial Django Tutorial Pandas Tutorial Kivy Tutorial Tkinter Tutorial OpenCV Tutorial Selenium Tutorial GATE CS GATE CS Notes Gate Corner Previous Year GATE Papers Last Minute Notes (LMNs) Important Topic For GATE CS GATE Course Previous Year Paper: CS exams Like