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
Last Updated :
06 Feb, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...