Semantic-UI Segment Circular Variation

Last Updated : 09 Mar, 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 in general use segments. It offers segments in different variations, type groups, and states.

In this article, we will learn about the Semantic-UI Segment Circular Variation along with implementation using the example code.

Segments in Semantic-UI are used in the grouping of related content. In Semantic-UI Segment Circular Variation, we can create segments in a circular shape. Now, let us understand the syntax.

Semantic-UI Segment Circular Variation Content Class :

circular: This class is used to make the segmented circular in shape to create a circular variation to the segment.

Syntax:

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

Example 1: We can observe that the segment is circular in shape. We can add content in the segment as shown in the following example.

HTML

<html> 
  
<head> 
    <title>Semantic-UI Segment Circular Variation</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 Circular Variation 
      </strong><br><br> 
  
      <div class="ui circular segment"> 
          <h2 class="ui header"> 
            Gfg 
            <div class="sub header">Segment</div>  
          </h2> 
      </div>                  
    </div> 
  </center> 
</body> 
  
</html>

Output :

Semantic-UI Segment Circular Variation

Example 2: We can even use inverted colors for contrast in circular segment.

HTML

<html> 
    
<head> 
    <title>Semantic-UI Segment Circular Variation</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 Circular Variation 
        </strong><br><br>      
  
        <div class="ui inverted circular segment"> 
            <h2 class="ui inverted header"> 
               Gfg 
              <div class="sub header">Segment</div> 
            </h2> 
        </div>               
      </div> 
  </center> 
</body> 
  
</html>