Semantic-UI Segment Padded 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, type groups, and states.
In this article, we will learn about the Semantic-UI Segment Padded Variation along with implementation using the example code.
Segments in Semantic-UI are used in the grouping of related content. Semantic-UI Segment padded Variation enables us to add padding to the segment as much as needed.
Semantic-UI Segment Padded Variation Classes
- padded : This class is used to add padding to the segment.
- very padded: This class is used to add extra padding to the segment when compared to using .padded class.
Syntax:
<div class="ui Padded-Variation-Class segment"> ...... </div>
Note: To add more padding to the segment we use .very padded class instead of .padded class.
Example 1: We can observe that the content is padded.
HTML
<html> <head> <title>Semantic-UI Segment Padded 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 Padded Variation </strong> <br><br> <div class="ui padded segment"> <p> As the placement season is back, GeeksforGeeks is here to help you crack the interview. </p> </div> </div> </center> </body> </html> |
Output :
Example 2: We can observe more padding in the segment than in the previous example. To achieve this, we use .very padded class.
HTML
<html> <head> <title>Semantic-UI Segment Padded 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 Padded Variation </strong> <br><br> <div class="ui very padded 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 Padded Variation
Reference: https://semantic-ui.com/elements/segment.html#padded
Please Login to comment...