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=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</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=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous">
</script>
<script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
</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