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 = "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" > w3wiki </ 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 :
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" > w3wiki </ 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 :
Reference link : https://semantic-ui.com/elements/segment.html#circular