Semantic-UI Statistics Types
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 = "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 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 = "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 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