Semantic-UI Statistic Type Statistic Group
Last Updated :
06 Feb, 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. It has a bunch of components for user interface design. One of them is “Statistics”. There are different types of statistics including group statistics.
Semantic-UI Statistic Type Statistic Group is used to create a group of statistics. There are 2 types of statistics one is regular statistics and statistics Group. In this article, we will know about the Statistic Group.
Semantic UI Statistics Group Type Class:
Syntax:
<div class="ui statistics">
....
</div>
Below example illustrate the Semantic-UI Statistic Type Statistic Group:
Example 1: This example demonstrates the group statistics using the statistic class.
HTML
<!DOCTYPE html>
< html >
< head >
< link href =
rel = "stylesheet" />
</ head >
< body >
< div class = "ui container" >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< b >
< p >Semantic UI group statistics </ 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:
Semantic-UI Statistic Type Statistic Group
Reference: https://semantic-ui.com/views/statistic.html#statistic-group
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...