Open In App

Semantic-UI Segment Compact Variation

Improve
Improve
Like Article
Like
Save
Share
Report

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

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

Semantic-UI Segment Compact Variation

Reference: https://semantic-ui.com/elements/segment.html#compact



Last Updated : 09 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads