Semantic-UI Statistics Evenly Divided Variant
Last Updated :
06 Feb, 2022
Semantic UI is an open-source framework that offers a variety of components to make your UI more meaningful. One of them is “Statistics”. The statistics component is used to magnify particular data for your website. Users can also position the statistics as per their requirements. Let us see this statistics variation.
Semantic-UI Statistics offers us 2 types o statistics with 6 types of variation for those two Horizontal, Coloured, Inverted, Evenly Divided, Floated, Clearing. In this article, we will know about the Semantic-UI Statistics Evenly Divided Variant.
Statistics Evenly Divided Variation offers to decide how many statistics you want to show in a row. A web page can contain a bunch of statistics. You can divide them with a precise number using this variation. We will create a UI showing the statistics evenly divided variation.
Semantic-UI Statistics Evenly Divided Variant Class:
- *number: This is a numeric value holder that divides the container in equal width of the component.
Syntax:
<div class="ui *number statistics">
<div class="statistic">
....
</div>
<div class="statistic">
....
</div>
....
</div>
Below example illustrate the Semantic-UI Statistics Evenly Divided Variant:
Example 1: This example demonstrates evenly divided statistics using the statistics class along with four statistics in a row.
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 evenly divided statistics.</p>
</b>
<div class="ui four statistics">
<div class="statistic">
<div class="value">
1
</div>
<div class="label">
Label 1
</div>
</div>
<div class="statistic">
<div class="value">
2
</div>
<div class="label">
Label 2
</div>
</div>
<div class="statistic">
<div class="value">
3
</div>
<div class="label">
Label 3
</div>
</div>
<div class="statistic">
<div class="value">
4
</div>
<div class="label">
Label 4
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Statistics Evenly Divided Variant
Example 2: This example demonstrates evenly divided statistics using the statistics class along with two statistics in a row.
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 evenly divided statistics.</p>
</b>
<div class="ui two statistics">
<div class="statistic">
<div class="value">
1
</div>
<div class="label">
Label 1
</div>
</div>
<div class="statistic">
<div class="value">
2
</div>
<div class="label">
Label 2
</div>
</div>
<div class="statistic">
<div class="value">
3
</div>
<div class="label">
Label 3
</div>
</div>
<div class="statistic">
<div class="value">
4
</div>
<div class="label">
Label 4
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Statistics Evenly Divided Variant
Reference: https://semantic-ui.com/views/statistic.html#evenly-divided
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...