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= 
 "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
         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>