Semantic-UI Raised Segments Group

Last Updated : 09 Mar, 2022

Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap.

Semantic UI provides the users with various segment classes which makes the segments on the websites look more elegant and beautiful. In this article let us see about the grouped segments of raised type.

The raised segments give some raising effect on the website for the segments.

Semantic UI raised segments group classes:

raised: This class gives the raising effect for the segment group.
segments: This class indicates that there is a segments group of multiple segments.

Syntax:

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

Example 1: The following code demonstrates the raised segments group.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Semantic-UI Raised Segments Group</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>
    <h1 class="ui green header">GeeksforGeeks</h1>
    <strong>
      Semantic-UI Segment Raised Segments Group
    </strong>
    <br/>
    <br/>
  </center>

  <div class=" ui container">
    <div class="ui raised segments">
      <div class="ui green segment">
        <p><a href=
"https://practice.geeksforgeeks.org/events">
            Events
           </a>
        </p>

      </div>

      <div class="ui segment">
        <p><a href=
"https://www.geeksforgeeks.org/">
             Tutorials
           </a>
        </p>

      </div>
      <div class="ui segment">
        <p><a href=
"https://www.geeksforgeeks.org/courses/">
             Practice
           </a>
        </p>

      </div>

      <div class="ui segment">
        <p><a href=
"https://www.geeksforgeeks.org/courses/">
             Courses
           </a>
        </p>

      </div>
    </div>
  </div>
</body>
</html>

Output:

Example 2: The following code demonstrates the raised segments group.

HTML

<!DOCTYPE html>
<html>

<head>
      <title>Semantic-UI Raised Segments Group</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>
    <h1 class="ui green header">GeeksforGeeks</h1>
        <strong>
        Semantic-UI Segment Raised Segments Group
    </strong>
    <br/>
    <br/>


    <div class=" ui container">
        <div class="ui raised segments">
            <div class="ui inverted green segment">
                <p>GeeksforGeeks Handles</p>

            </div>

            <div class="ui segment">
                <p><a href=
"https://www.instagram.com/geeks_for_geeks/">
                    Instagram</a>
                </p>

            </div>

            <div class="ui segment">
                <p><a href=
"https://www.facebook.com/geeksforgeeks.org/">
                    Facebook</a>
                </p>

            </div>

            <div class="ui segment">
                <p><a href=
"https://in.linkedin.com/company/geeksforgeeks">
                    Linkedin</a>
                </p>

            </div>

            <div class="ui segment">
                <p><a href=
 "https://twitter.com/geeksforgeeks">
                    Twitter</a>
                </p>

            </div>
            <div class="ui segment">
                <p><a href=
"https://www.youtube.com/geeksforgeeksvideos">
                    Youtube</a>
                </p>

            </div>

        </div>
    </div>
  </center>
  
  <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</body>

</html>

Output :

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

Semantic-UI Segment Raised Type

lokeshpotta20

Improve

Article Tags :

Semantic-UI Raised Segments Group

Similar Reads

Thank You!

What kind of Experience do you want to share?