Semantic-UI Segment Stacked Type
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:
-
stacked: It is used to create segment that can be formatted to display it contains on multiple pages.
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" >w3wiki</ h2 > < strong >Semantic-UI Segment Stacked Type</ strong > < br />< br /> < div class = "ui stacked segment" > < p > As the placement season is back, w3wiki 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" >w3wiki</ h2 > < strong >Semantic-UI Segment Stacked Type</ strong > < br />< br /> < div class = "ui tall stacked segment" > < p > As the placement season is back, w3wiki 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
Contact Us