Open In App

Semantic-UI Statistics Variations Horizontal Statistic Variant

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

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

Semantic-UI Statistics Variations Horizontal Statistic Variant

Semantic-UI Statistics Variations Horizontal Statistic Variant

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



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