Semantic-UI Segment Compact 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 use segments. It offers segments in different variations, types, groups, and states.
In this article, we will learn about the Semantic-UI Segment Compact variation along with implementation using the example code.
Segments in Semantic-UI are used in the grouping of related content. In Semantic-UI Segment Compact variation, the segment takes space as much as needed wrt content. It doesn’t occupy extra space.
Semantic-UI Segment Compact Variation Class:
- compact: This class is used to make the segment take space as much as necessary wrt content
Syntax:
<div class="ui compact segment"> .... </div>
Example 1: We can observe segment takes space as much as it needs with respect to the content such that content is entirely packed in the segment.
HTML
<html> <head> <title> Semantic-UI Segment Compact 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 Compact Variation </strong><br><br> <div class="ui compact segment"> <p> As the placement season is back, GeeksforGeeks is here to help you crack the interview. </p> </div> </div> </center> </body> </html> |
Output :
Semantic-UI Segment Compact Variation
Example 2: We can even use two segments in Semantic-UI Segment Compact variation which is illustrated in this example.
HTML
<html> <head> <title>Semantic-UI Segment Compact 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 Compact Variation </strong><br><br> <div class="ui compact segments"> <div class="ui segment"> <p> Semantic-UI Segment Compact Variation </p> </div> <div class="ui segment"> <p> As the placement season is back, GeeksforGeeks is here to help you crack the interview. </p> </div> </div> </div> </center> </body> </html> |
Output :
Semantic-UI Segment Compact Variation
Reference: https://semantic-ui.com/elements/segment.html#compact
Please Login to comment...