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= rel="stylesheet"/> <script src= </script> <script src= </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
Semantic-UI Stacked Segments Group
Reference: https://semantic-ui.com/elements/segment.html#stacked-segments
Please Login to comment...