Semantic-UI Segment Raised Type

Semantic UI is an open-source CSS framework based on less and jQuery. It comes with its pre-built modules and elements which enables developers to develop responsive and beautiful websites in less time. In this article, we will be seeing the Semantic UI Segment Raised Type.

A Segment is used to group similar content which makes the user experience better and helps users to navigate through your content efficiently. A Raised segment is a type of segment that is formatted to raise above the page by applying the box-shadow property to it.

Semantic UI Segment Raised Type Class:

raised: This class is used on the segment element to make it look raised above the rest of the page.

Syntax:

<div class="ui segment raised">
    ...
</div>

Example 1: The below example shows a simple use of the raised class to raise a segment above the page.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Semantic-UI Segment Raised Type</title>
    <link rel="stylesheet"
          href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>

    <style>
        .ui.container {
            text-align: center;
        }

        h3#subheading {
            margin-top: 0px;
            margin-bottom: 30px;
        }
    </style>
</head>

<body>
    <div class="ui container">
        <div>
            <h1 style="color: green">GeeksforGeeks</h1>
            <h3 id="subheading">
              Semantic UI - Segment Raised Type
            </h3>
        </div>

        <div class="ui segment">
            <p>This is a normal segment.</p>
        </div>
        <div class="ui segment raised">
            <p>This is a raised segment.</p>
        </div>
        <div class="ui segment">
            <p>This is a normal segment.</p>
        </div>
    </div>
</body>

</html>

Output:

Example 2: The example below shows the use of raised class on the different variations of the segment.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Semantic-UI Segment Raised Type</title>
    <link rel="stylesheet" 
          href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>

    <style>
        .ui.container {
            text-align: center;
        }

        h3#subheading {
            margin-top: 0px;
            margin-bottom: 30px;
        }

        .column {
            display: flex !important;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div class="ui container">
        <div>
            <h1 style="color: green">GeeksforGeeks</h1>
            <h3 id="subheading">
              Semantic UI - Segment Raised Type
            </h3>
        </div>

        <p><b>Raised Type Segment with Color Variation</b></p>
        <div class="ui segment raised red ">
            <p>This is a red colored segment.</p>
        </div>
        <div class="ui segment red ">
            <p>This is a red colored segment with 
              <i>raised</i> class.</p>
        </div>
        <p><b>Raised Type Variation with Circular Variation</b></p>
        <div class="ui grid">
            <div class="eight wide column">
                <div class="ui segment raised circular ">
                    <img height="50" 
                         src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220115184050/gfglogo-300x300.png">
                </div>
            </div>
            <div class="eight wide column">
                <div class="ui segment circular ">
                    <img height="50" 
                         src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220115184050/gfglogo-300x300.png">
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Output:

Reference: https://semantic-ui.com/elements/segment.html#raised

Semantic-UI Segment Raised Type

Explore