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 > w3wiki</ 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
Contact Us