Semantic-UI Raised Segments Group

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.

Output: 

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

Output :

Semantic-UI Raised Segments Group

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