Semantic-UI Statistics Variations Floated Variant

Last Updated : 02 Feb, 2022

Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.

Semantic-UI Statistics offers us two types of statistics with the six types of variation like Horizontal, Coloured, Inverted, Evenly, Floating, and different sizes. In this article, we will learn about the Semantic-UI Statistics Variations Floated Variant.

Semantic-UI Statistics Floated Variation offers different variations to align the other contents like paragraphs, headings, etc to be aligned to which direction. The contents and the Statistics element are nested inside a class for the Floating direction.

Semantic-UI Statistics Floated Variation Classes:

left floated: This means that the Statistics will be floated in the left direction of the content.
right floated: This means that the Statistics will be floated in the right direction of the content.

Syntax: Set the Floated either left or right of the Statistics to the rest of the content as follows

<div class="ui Floated-Classes statistic">
    <div class=".."> ... </div>
    <div class=".."> ... </div>
</div>

Below example illustrate the Semantic-UI Statistics Variations Floated Variant:

Example: In the following example, we are toggling the Floated direction of Statistics using a button and Javascript function.

HTML

<!DOCTYPE html> 
<html> 
    <head> 
        <link rel="stylesheet" 
              href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
        <script src= 
"https://code.jquery.com/jquery-3.1.1.min.js"> 
        </script> 
        <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
        </script> 
    </head> 
    <body> 
        <div class="ui container"> 
            <center> 
                <h1 style="color: green;"> 
                    GeeksforGeeks 
                </h1> 
                <strong> 
                    Semantic-UI Statistics Floated Variation 
                </strong> 
                <div class="ui segment large"> 
                    <div class="ui left floated statistic mini"
                         id="gfgstats"> 
                        <div class="value"> 
                            12,330 
                        </div> 
                        <div class="label"> 
                            Views 
                        </div> 
                    </div> 
                     <p> 
                        GeeksforGeeks is a computer  
                        science portal for geeks. 
                    </p> 
  
                </div> 
                <div> 
                    <button onclick="changeFloat()"> 
                      Change Float Direction 
                   </button> 
                </div> 
            </center> 
        </div> 
        <script> 
            function changeFloat(){ 
                $("#gfgstats").toggleClass("left floated") 
                $("#gfgstats").toggleClass("right floated") 
            } 
        </script> 
    </body> 
</html>