Skip to content
Related Articles

Related Articles

Semantic-UI Statistics Types

View Discussion
Improve Article
Save Article
  • Last Updated : 22 Apr, 2022
View Discussion
Improve Article
Save Article

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=
         rel="stylesheet" />
   </head>
   <body>
      <div class="ui container">
         <h2 style="color:green">GeeksforGeeks</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=
         rel="stylesheet" />
   </head>
   <body >
      <div class="ui container">
         <h2 style="color:green">GeeksforGeeks</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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!