Semantic-UI Statistics Types
Last Updated :
22 Apr, 2022
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”. There are different types of statistics.
We will create a UI to show the different types of statistics. After creating this basic template you can work with different components of Semantic UI.
Semantic UI Statistics Types class:
- statistic: A single statistic value based on the position of the label above or below it.
- statistic group: This is a bunch or group of statistics showing relatable content.
Syntax:
<div class="ui Statistic-Types-class">
<div class="ui statistic">
....
</div>
<div class="ui statistic">
....
</div>
....
</div>
Example 1: This example demonstrates the single statistics using the statistic 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 statistic</ p >
</ b >
< div class = "ui statistic" >
< div class = "value" >
1
</ div >
< div class = "label" >
Label 1
</ div >
</ div >
< br />
< div class = "ui statistic" >
< div class = "label" >
Label 2
</ div >
< div class = "value" >
2
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: This example demonstrates the group statistics using the statistics 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 statistics Group</ p >
</ b >
< div class = "ui statistics" >
< div class = "statistic" >
< div class = "value" >
150
</ div >
< div class = "label" >
Likes
</ div >
</ div >
< div class = "statistic" >
< div class = "value" >
3000
</ div >
< div class = "label" >
Views
</ div >
</ div >
< div class = "statistic" >
< div class = "value" >
100
</ div >
< div class = "label" >
Comments
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://semantic-ui.com/views/statistic.html
Share your thoughts in the comments
Please Login to comment...