Open In App

Semantic-UI Statistics Content

Improve
Improve
Like Article
Like
Save
Share
Report

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=
            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=
                       class="ui circular inline image">
               </div>
               <div class="label">
                  Image
               </div>
            </div>
         </div>
      </div>
   </body>
</html>


Output:

Semantic-UI Statistics Content

Semantic-UI Statistics Content

Example 2: This example demonstrates the label representation 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 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>


Output:

Semantic-UI Statistics Content

Semantic-UI Statistics Content

Reference: https://semantic-ui.com/views/statistic.html



Last Updated : 22 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads