Semantic-UI Statistics Variations Horizontal Statistic Variant

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. You can use a variety of components to design your website. One of them is "Statistics".

Semantic UI has a Statistics component to magnify particular data for your website. Let us see a variation of it.

Horizontal Statistic Variation is used to show the magnified data and its label in a horizontal form. Normally the label comes below the value but here the user can show the value and label in one row. A bunch or group of statistics showing relatable content can be displayed in one row. We will create a UI to show the horizontal statistic variation.

Semantic-UI Statistics Variations Horizontal Statistic Variant Class:

horizontal statistic: This class is used to make the statistics in the horizontal dimension.

Syntax:

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

Below example illustrate the Semantic-UI Statistics Variations Horizontal Statistic Variant:

Example 1: This example demonstrates the single horizontal statistic using the horizontal 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 horizontal statistic</p>

        </b>
        <div class="ui horizontal statistic">
            <div class="value">
                98.6 F
            </div>
            <div class="label">
                Temperature
            </div>
        </div>
    </div>
</body>

</html>

Output:

Semantic-UI Statistics Variations Horizontal Statistic Variant

Example 2: This example demonstrates a group of horizontal statistics using the horizontal 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 horizontal statistics</p>
        </b>
        <div class="ui horizontal statistics">
            <div class="statistic">
                <div class="value">
                    300
                </div>
                <div class="label">
                    Views
                </div>
            </div>
            <div class="statistic">
                <div class="value">
                    200
                </div>
                <div class="label">
                    Likes
                </div>
            </div>
            <div class="statistic">
                <div class="value">
                    100
                </div>
                <div class="label">
                    Comments
                </div>
            </div>
        </div>
    </div>
</body>

</html>

Output:

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

Semantic-UI Statistics Variations Horizontal Statistic Variant

Explore