Semantic-UI Statistics Content
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:
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.
HTML
<!DOCTYPE html> < html > < head > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> </ head > < body > < div class = "ui container" > < h2 style = "color:green" >w3wiki</ 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 > Beginner </ 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 = "https://media.w3wiki.net/wp-content/cdn-uploads/gfg_200x200-min.png" 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.
HTML
<!DOCTYPE html> < html > < head > < link href = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> </ head > < body > < div class = "ui container" > < h2 style = "color:green" >w3wiki</ 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