Semantic-UI Stacked Segments Group
Last Updated :
16 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 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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...