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 has a bunch of components for user interface design. One of them is “statistics”. Statistics are used for various purposes on a web page. It is used to magnify particular data for your website. The user might need to show different statistics in different variations according to his requirements. To depict a statistics data significance, its variation can vary.
Semantic UI Statistics Variations:
- Horizontal: This variation is used to display statistics in the horizontal dimension.
- Colored: This variation is used to display statistics in different colors like red, orange, and so on.
- Inverted: This variation is used to make the statistics inverted(color-wise).
- Evenly divided: This variation is used to decide how many statistics you want to show in a row.
- Floated: This variation is used to make statistics float left or right of the content.
- Size: This variation is used to make statistics vary in size. The classes used are mini, tiny, small statistics.
Syntax:
<div class="ui Statistics-Variation">
<div class="ui ..">
.....
</div>
</div>
Example 1: This example demonstrates some of the Semantic-UI Statistics classes. Refer to the output for better understanding.
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Statistics Variations</title>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>
<body>
<div class="ui container">
<br /><br />
<h2 class="ui header green">GeeksforGeeks</h2>
<b>
<p>Semantic UI Statistics Variations</p>
</b>
<hr><br />
<span>Horizontal Statistic : </span>
<div class="ui horizontal statistic"
style="margin-right:120px">
<div class="value">
1
</div>
<div class="label">
Label 1
</div>
</div>
<span>Colored Statistic : </span>
<div class="ui green statistic">
<div class="value">
2
</div>
<div class="label">
Label 2
</div>
</div>
<div class="ui red statistic">
<div class="value">
3
</div>
<div class="label">
Label 3
</div>
</div>
<div class="ui orange statistic">
<div class="value">
4
</div>
<div class="label">
Label 4
</div>
</div>
<br />
<div class="ui inverted segment">
<p>Inverted Statistic : </p>
<div class="ui inverted statistic">
<div class="value">
5
</div>
<div class="label">
Label 5
</div>
</div>
<div class="ui green inverted statistic">
<div class="value">
6
</div>
<div class="label">
Label 6
</div>
</div>
<div class="ui inverted statistic">
<div class="value">
7
</div>
<div class="label">
Label 7
</div>
</div>
</div>
<br />
<p>Evenly Divided Statistic : </p>
<div class="ui four statistics">
<div class="statistic">
<div class="value">
8
</div>
<div class="label">
Label 8
</div>
</div>
<div class="statistic">
<div class="value">
9
</div>
<div class="label">
Label 9
</div>
</div>
<div class="statistic">
<div class="value">
10
</div>
<div class="label">
Label 10
</div>
</div>
<div class="statistic">
<div class="value">
11
</div>
<div class="label">
Label 11
</div>
</div>
</div>
<br />
<span>Floated Statistic : </span>
<div class="ui segment">
<div class="ui left floated statistic">
<div class="value">
12
</div>
<div class="label">
Floated
</div>
</div>
<p>As the placement season is back,
GeeksforGeeks is here to help you
crack the interview. We have selected
some most commonly asked and MUST DO
practice problems to crack Product-based
Company Interviews.You can also take part
in our mock placement contests which will
help you learn different topics and
practice at the same time, simulating the
feeling of a real placement test
environment.
</p>
</div>
<br />
<span>Size Statistic : </span>
<div class="ui mini statistic">
<div class="value">
13
</div>
<div class="label">
Mini
</div>
</div>
<div class="ui small statistic">
<div class="value">
14
</div>
<div class="label">
Small
</div>
</div>
<div class="ui large statistic">
<div class="value">
15
</div>
<div class="label">
Large
</div>
</div>
</div>
</body>
</html>
Output:
Example 2: This example also demonstrates some of the Semantic UI Statistics classes.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
</head>
<body>
<div class="ui container">
<br /><br />
<h2 class="ui header green">GeeksforGeeks</h2>
<b>
<p>Semantic UI Statistics Variations</p>
</b>
<hr><br />
<span>Horizontal Statistic : </span>
<div class="ui horizontal statistic"
style="margin-right:120px">
<div class="value">
1
</div>
<div class="label">
One
</div>
</div>
<span>Colored Statistic : </span>
<div class="ui teal statistic">
<div class="value">
2
</div>
<div class="label">
Teal
</div>
</div>
<div class="ui blue statistic">
<div class="value">
3
</div>
<div class="label">
Blue
</div>
</div>
<div class="ui violet statistic">
<div class="value">
4
</div>
<div class="label">
Violet
</div>
</div>
<br />
<div class="ui inverted segment">
<p>Inverted Statistic : </p>
<div class="ui green inverted statistic">
<div class="value">
5
</div>
<div class="label">
Five
</div>
</div>
<div class="ui white inverted statistic">
<div class="value">
6
</div>
<div class="label">
Six
</div>
</div>
<div class="ui green inverted statistic">
<div class="value">
7
</div>
<div class="label">
Seven
</div>
</div>
</div>
<br />
<p>Evenly Divided Statistic : </p>
<div class="ui two statistics">
<div class="statistic">
<div class="value">
8
</div>
<div class="label">
Eight
</div>
</div>
<div class="statistic">
<div class="value">
9
</div>
<div class="label">
Nine
</div>
</div>
<div class="statistic">
<div class="value">
10
</div>
<div class="label">
Ten
</div>
</div>
<div class="statistic">
<div class="value">
11
</div>
<div class="label">
Eleven
</div>
</div>
</div>
<br />
<span>Floated Statistic : </span>
<div class="ui segment" style="padding-bottom:20px">
<div class="ui right floated statistic">
<div class="value">
12
</div>
<div class="label">
Floated
</div>
</div>
<p>As the placement season is back,
GeeksforGeeks is here to help you
crack the interview. We have selected
some most commonly asked and MUST DO
practice problems to crack Product-based
Company Interviews.You can also take part
in our mock placement
contests which will help you learn different
topics and practice at the same time, simulating
the feeling of a real placement test environment.
</p>
</div>
<br />
<span>Size Statistic : </span>
<div class="ui large statistic">
<div class="value">
13
</div>
<div class="label">
large
</div>
</div>
<div class="ui huge statistic">
<div class="value">
14
</div>
<div class="label">
Huge
</div>
</div>
</div>
</body>
</html>
Output:
Reference: https://semantic-ui.com/views/statistic.html