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 users to design web pages. One of them is “Statistics”. There are different ways of content representation in a statistic.
Let us design a UI showing the contents of different statistics. After creating this design you can work with different components of Semantic UI.
Semantic UI Statistics Content-Class:
- value: Value can be represented through an icon, text, numeric, or image.
- label: Statistics contain a label that provides a reference for the value.
Syntax:
<div class="ui statistic"> <div class="value"> .... </div> <div class="label"> .... </div> </div>
Example 1: This example demonstrates the different value representations using the statistic 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 statistics value. </ p >
</ b >
< div class = "ui statistics" >
< div class = "statistic" >
< div class = "value" >
100
</ div >
< div class = "label" >
Numeric
</ div >
</ div >
< div class = "statistic" >
< div class = "text value" >
Hi< br >
Geeks
</ div >
< div class = "label" >
Text
</ div >
</ div >
< div class = "statistic" >
< div class = "value" >
< i class = "arrow right icon" ></ i >
</ div >
< div class = "label" >
Icon
</ div >
</ div >
< div class = "statistic" >
< div class = "value" >
< img src =
class = "ui circular inline image" >
</ div >
< div class = "label" >
Image
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Example 2: This example demonstrates the label representation using the statistic 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 statistics with/without label. </ p >
</ b >
< div class = "ui statistics" >
< div class = "statistic" >
< div class = "value" >
GFG
</ div >
< div class = "label" >
Website
</ div >
</ div >
< div class = "statistic" >
< div class = "value" >
GFG
</ div >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://semantic-ui.com/views/statistic.html