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:

value: Value can be represented through an icon, text, numeric, or image.
label: Statistics contain a label that provides a reference for the value.

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">GeeksforGeeks</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>
                  Geeks
               </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.geeksforgeeks.org/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:

Semantic-UI Statistics Content

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">GeeksforGeeks</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>