Semantic-UI Statistics Variations Horizontal Statistic Variant
Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. You can use a variety of components to design your website. One of them is “Statistics”.
Semantic UI has a Statistics component to magnify particular data for your website. Let us see a variation of it.
Horizontal Statistic Variation is used to show the magnified data and its label in a horizontal form. Normally the label comes below the value but here the user can show the value and label in one row. A bunch or group of statistics showing relatable content can be displayed in one row. We will create a UI to show the horizontal statistic variation.
Semantic-UI Statistics Variations Horizontal Statistic Variant Class:
- horizontal statistic: This class is used to make the statistics in the horizontal dimension.
Syntax:
<div class="ui horizontal statistic">
<div class="value">
.....
</div>
<div class="label">
.....
</div>
</div>
Below example illustrate the Semantic-UI Statistics Variations Horizontal Statistic Variant:
Example 1: This example demonstrates the single horizontal statistic using the horizontal class.
HTML
<!DOCTYPE html> <html> <head> <link href= rel="stylesheet" /> </head> <body> <div class="ui container"> <h2 style="color:green">GeeksforGeeks</h2> <b> <p>Semantic UI horizontal statistic</p> </b> <div class="ui horizontal statistic"> <div class="value"> 98.6 F </div> <div class="label"> Temperature </div> </div> </div> </body> </html> |
Output:
Semantic-UI Statistics Variations Horizontal Statistic Variant
Example 2: This example demonstrates a group of horizontal statistics using the horizontal class.
HTML
<!DOCTYPE html> <html> <head> <link href= rel="stylesheet" /> </head> <body> <div class="ui container"> <h2 style="color:green">GeeksforGeeks</h2> <b> <p>Semantic UI horizontal statistics</p> </b> <div class="ui horizontal statistics"> <div class="statistic"> <div class="value"> 300 </div> <div class="label"> Views </div> </div> <div class="statistic"> <div class="value"> 200 </div> <div class="label"> Likes </div> </div> <div class="statistic"> <div class="value"> 100 </div> <div class="label"> Comments </div> </div> </div> </div> </body> </html> |
Output:
Semantic-UI Statistics Variations Horizontal Statistic Variant
Reference: https://semantic-ui.com/views/statistic.html#horizontal-statistic
Please Login to comment...