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>
Output :
Semantic-UI Segment Circular Variation
Reference link : https://semantic-ui.com/elements/segment.html#circular