Semantic-UI Statistics Content Value

Last Updated : 06 Feb, 2022

Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. Statistics is used to emphasize the value of a label. It is normally used to display views, likes, and subscriptions on a webpage.

Semantic UI Statistics Value Content contains a Value. Suppose the user wants to highlight data on UI he also needs to indicate in some cases, which part of content he is referring to. The Value Content contains numbers, text, icons, images, or text value.

Semantic-UI Statistics Value Content Classes:

value: This class is used to define the value of the statistics.

Syntax: Add the value class to the div container with any content as follows:

<div class="ui statistic">
    <div class="value"> ... </div>
    <div class="label"> ... </div>
</div>

Below example illustrate the Semantic-UI Statistics Content Value:

Example: In the following example, we have different statistics with different values like numeric, text, icons.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" /> 
    <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
    </script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="ui container"> 
        <center> 
            <h1 style="color: green;"> 
                GeeksforGeeks 
            </h1> 
            <h2> 
                Semantic-UI Statistics Value content 
            </h2> 
            <div class="ui small statistics" id="gfgstats"> 
                <div class="statistic"> 
                    <div class="value"> 
                        12,330 
                    </div> 
                    <div class="label"> 
                        Views 
                    </div> 
                </div> 
                <div class="statistic"> 
                    <div class="value"> 
                        GeeksforGeeks 
                    </div> 
                    <div class="label"> 
                        A computer science portal for geeks 
                    </div> 
                </div> 
                <div class="statistic"> 
                    <div class="value"> 
                        <i class="globe loading green icon"> 
                        </i> 
                    </div> 
                    <div class="label"> 
                        Views 
                    </div> 
                </div> 
            </div> 
        </center> 
    </div> 
</body> 
  
</html>