Semantic-UI Statistics Types

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”. There are different types of statistics.

We will create a UI to show the different types of statistics. After creating this basic template you can work with different components of Semantic UI. 

Semantic UI Statistics Types class:

• statistic:  A single statistic value based on the position of the label above or below it.
• statistic group:  This is a bunch or group of statistics showing relatable content.

Syntax:

<div class="ui Statistic-Types-class">  
     <div class="ui statistic">
        ....
     </div>
     <div class="ui statistic">
        ....
     </div>
     ....
</div>

Example 1: This example demonstrates the single statistics using the statistic class.

Output: 

Example 2: This example demonstrates the group statistics using the statistics class.

Output: 

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