Skip to content
Related Articles

Related Articles

Semantic-UI Statistics Variations

View Discussion
Improve Article
Save Article
  • Last Updated : 16 Mar, 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”. 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=
</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

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=
</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

Semantic-UI Statistics Variations

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!