Semantic-UI Segment Circular Variation
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= rel="stylesheet"/> <script src= integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </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= rel="stylesheet"/> <script src= integrity= "sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"> </script> <script src= </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> |
Output :
Semantic-UI Segment Circular Variation
Reference link : https://semantic-ui.com/elements/segment.html#circular
Please Login to comment...