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.
<!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" />
< 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