Semantic-UI Segment Stacked Type
Last Updated :
28 Feb, 2022
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI provides us with a very easy way to style the web app instead of using CSS. To create a grouping of content that is related, we use segments. It offers segments in different variations, types, groups, and states.
In this article, we will learn about Semantic-UI Segment Stacked Type and its implementation using the example code.
Semantic-UI Segment Stacked Type: Segments in Semantic UI are used to group related content. Semantic-UI Segment Stacked Type is used to show that content is displayed on multiple pages.
Used Class:
Syntax:
<div class="ui stacked segment">
...
</div>
Example 1: We can clearly observe that content is stacked on multiple pages.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic-UI Segment Stacked Type</ title >
< link href =
rel = "stylesheet" />
integrity = "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body >
< center >
< div class = "ui container" >
< h2 class = "ui header green" >Geeksforgeeks</ h2 >
< strong >Semantic-UI Segment Stacked Type</ strong >
< br />< br />
< div class = "ui stacked segment" >
< p >
As the placement season is back,
GeeksforGeeks is here to help you
crack the interview.
</ p >
</ div >
</ div >
</ center >
</ body >
</ html >
|
Output:
Example 2: We can observe that the content is shown in more number of pages than previous example by using .ui tall stacked segment.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic-UI Segment Stacked Type</ title >
< link href =
rel = "stylesheet" />
integrity = "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body >
< center >
< div class = "ui container" >
< h2 class = "ui header green" >Geeksforgeeks</ h2 >
< strong >Semantic-UI Segment Stacked Type</ strong >
< br />< br />
< div class = "ui tall stacked segment" >
< p >
As the placement season is back,
GeeksforGeeks is here to help you
crack the interview.
</ p >
</ div >
</ div >
</ center >
</ body >
</ html >
|
Output:
Reference link: https://semantic-ui.com/elements/segment.html#stacked
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...