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:

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">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

Semantic-UI Segment Types

geethika1129

Improve

Article Tags :

Semantic-UI Segment Stacked Type

Similar Reads

Thank You!

What kind of Experience do you want to share?