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.
<!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.
<!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