Semantic-UI Statistics Variations

Last Updated : 16 Mar, 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.

Semantic UI has a bunch of components for user interface design. One of them is “statistics”. Statistics are used for various purposes on a web page. It is used to magnify particular data for your website. The user might need to show different statistics in different variations according to his requirements. To depict a statistics data significance, its variation can vary.

Semantic UI Statistics Variations:

Horizontal: This variation is used to display statistics in the horizontal dimension.
Colored: This variation is used to display statistics in different colors like red, orange, and so on.
Inverted: This variation is used to make the statistics inverted(color-wise).
Evenly divided: This variation is used to decide how many statistics you want to show in a row.
Floated: This variation is used to make statistics float left or right of the content.
Size: This variation is used to make statistics vary in size. The classes used are mini, tiny, small statistics.

Syntax:

<div class="ui Statistics-Variation">
    <div class="ui ..">
     .....
    </div>
</div>

Example 1: This example demonstrates some of the Semantic-UI Statistics classes. Refer to the output for better understanding.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic-UI Statistics Variations</title> 
    <link rel="stylesheet" 
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
</head> 
  
<body> 
    <div class="ui container"> 
        <br /><br /> 
        <h2 class="ui header green">GeeksforGeeks</h2> 
        <b> 
            <p>Semantic UI Statistics Variations</p> 
        </b> 
        <hr><br /> 
        <span>Horizontal Statistic :   </span> 
        <div class="ui horizontal statistic"
             style="margin-right:120px"> 
            <div class="value"> 
                1 
            </div> 
            <div class="label"> 
                Label 1 
            </div> 
        </div> 
        <span>Colored Statistic :   </span> 
        <div class="ui green statistic"> 
            <div class="value"> 
                2 
            </div> 
            <div class="label"> 
                Label 2 
            </div> 
        </div> 
        <div class="ui red statistic"> 
            <div class="value"> 
                3 
            </div> 
            <div class="label"> 
                Label 3 
            </div> 
        </div> 
        <div class="ui orange statistic"> 
            <div class="value"> 
                4 
            </div> 
            <div class="label"> 
                Label 4 
            </div> 
        </div> 
        <br /> 
        <div class="ui inverted segment"> 
            <p>Inverted Statistic :  </p> 
            <div class="ui  inverted  statistic"> 
                <div class="value"> 
                    5 
                </div> 
                <div class="label"> 
                    Label 5 
                </div> 
            </div> 
            <div class="ui green inverted statistic"> 
                <div class="value"> 
                    6 
                </div> 
                <div class="label"> 
                    Label 6 
                </div> 
            </div> 
            <div class="ui  inverted statistic"> 
                <div class="value"> 
                    7 
                </div> 
                <div class="label"> 
                    Label 7 
                </div> 
            </div> 
        </div> 
        <br /> 
        <p>Evenly Divided Statistic :   </p> 
        <div class="ui four statistics"> 
            <div class="statistic"> 
                <div class="value"> 
                    8 
                </div> 
                <div class="label"> 
                    Label 8 
                </div> 
            </div> 
            <div class="statistic"> 
                <div class="value"> 
                    9 
                </div> 
                <div class="label"> 
                    Label 9 
                </div> 
            </div> 
            <div class="statistic"> 
                <div class="value"> 
                    10 
                </div> 
                <div class="label"> 
                    Label 10 
                </div> 
            </div> 
            <div class="statistic"> 
                <div class="value"> 
                    11 
                </div> 
                <div class="label"> 
                    Label 11 
                </div> 
            </div> 
        </div> 
        <br /> 
        <span>Floated Statistic :   </span> 
        <div class="ui segment"> 
            <div class="ui left floated statistic"> 
                <div class="value"> 
                    12 
                </div> 
                <div class="label"> 
                    Floated 
                </div> 
            </div> 
            <p>As the placement season is back, 
                GeeksforGeeks is here to help you 
                crack the interview. We have selected 
                some most commonly asked and MUST DO 
                practice problems to crack Product-based 
                Company Interviews.You can also take part  
                in our mock placement contests which will  
                help you learn different topics and  
                practice at the same time, simulating the 
                feeling of a real placement test  
                environment. 
            </p> 
        </div> 
        <br /> 
        <span>Size Statistic :   </span> 
        <div class="ui mini statistic"> 
            <div class="value"> 
                13 
            </div> 
            <div class="label"> 
                Mini 
            </div> 
        </div> 
        <div class="ui small statistic"> 
            <div class="value"> 
                14 
            </div> 
            <div class="label"> 
                Small 
            </div> 
        </div> 
        <div class="ui large statistic"> 
            <div class="value"> 
                15 
            </div> 
            <div class="label"> 
                Large 
            </div> 
        </div> 
    </div> 
</body> 
</html> 

Output:

Semantic-UI Statistics Variations

Example 2: This example also demonstrates some of the Semantic UI Statistics classes.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" 
          href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
</head> 
  
<body> 
    <div class="ui container"> 
        <br /><br /> 
        <h2 class="ui header green">GeeksforGeeks</h2> 
        <b> 
            <p>Semantic UI Statistics Variations</p> 
        </b> 
        <hr><br /> 
        <span>Horizontal Statistic :   </span> 
        <div class="ui horizontal statistic"
             style="margin-right:120px"> 
            <div class="value"> 
                1 
            </div> 
            <div class="label"> 
                One 
            </div> 
        </div> 
        <span>Colored Statistic :   </span> 
        <div class="ui teal statistic"> 
            <div class="value"> 
                2 
            </div> 
            <div class="label"> 
                Teal 
            </div> 
        </div> 
        <div class="ui blue statistic"> 
            <div class="value"> 
                3 
            </div> 
            <div class="label"> 
                Blue 
            </div> 
        </div> 
        <div class="ui violet statistic"> 
            <div class="value"> 
                4 
            </div> 
            <div class="label"> 
                Violet 
            </div> 
        </div> 
        <br /> 
        <div class="ui inverted segment"> 
            <p>Inverted Statistic :  </p> 
            <div class="ui green inverted  statistic"> 
                <div class="value"> 
                    5 
                </div> 
                <div class="label"> 
                    Five 
                </div> 
            </div> 
            <div class="ui white inverted statistic"> 
                <div class="value"> 
                    6 
                </div> 
                <div class="label"> 
                    Six 
                </div> 
            </div> 
            <div class="ui green inverted statistic"> 
                <div class="value"> 
                    7 
                </div> 
                <div class="label"> 
                    Seven 
                </div> 
            </div> 
        </div> 
        <br /> 
        <p>Evenly Divided Statistic :   </p> 
        <div class="ui two statistics"> 
            <div class="statistic"> 
                <div class="value"> 
                    8 
                </div> 
                <div class="label"> 
                    Eight 
                </div> 
            </div> 
            <div class="statistic"> 
                <div class="value"> 
                    9 
                </div> 
                <div class="label"> 
                    Nine 
                </div> 
            </div> 
            <div class="statistic"> 
                <div class="value"> 
                    10 
                </div> 
                <div class="label"> 
                    Ten 
                </div> 
            </div> 
            <div class="statistic"> 
                <div class="value"> 
                    11 
                </div> 
                <div class="label"> 
                    Eleven 
                </div> 
            </div> 
        </div> 
        <br /> 
        <span>Floated Statistic :   </span> 
        <div class="ui segment" style="padding-bottom:20px"> 
            <div class="ui right floated statistic"> 
                <div class="value"> 
                    12 
                </div> 
                <div class="label"> 
                    Floated 
                </div> 
            </div> 
            <p>As the placement season is back, 
                GeeksforGeeks is here to help you 
                crack the interview. We have selected 
                some most commonly asked and MUST DO 
                practice problems to crack Product-based 
                Company Interviews.You can also take part  
                in our mock placement 
                contests which will help you learn different 
                topics and practice at the same time, simulating 
                the feeling of a real placement test environment. 
            </p> 
        </div> 
        <br /> 
        <span>Size Statistic :   </span> 
        <div class="ui large statistic"> 
            <div class="value"> 
                13 
            </div> 
            <div class="label"> 
                large 
            </div> 
        </div> 
        <div class="ui huge statistic"> 
            <div class="value"> 
                14 
            </div> 
            <div class="label"> 
                Huge 
            </div> 
        </div> 
    </div> 
</body> 
</html> 

Output:

Semantic-UI Statistics Variations

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

Suggest improvement

Semantic-UI Statistics Content

Semantic-UI | Accordion

Share your thoughts in the comments

Semantic-UI Button

Semantic-UI Divider

Semantic-UI Header

Semantic-UI Image

Semantic-UI Input

Semantic-UI Label

Semantic-UI List

Semantic-UI Loader

Semantic-UI Placeholder

Semantic-UI Rail

Semantic-UI Reveal

Smentic-UI Segment

Semantic-UI Step

Semantic-UI Breadcrumb

Smenatic-UI Form

Semantic-UI Menu

Semantic-UI Message

Semantic-UI Table

Semnatic-UI Advertisement

Semantic-UI Card

Semantic-UI Comment

Semantic-UI Feed

Semantic-UI Item