Semantic-UI Statistics Variations
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.
<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.
Example 2: This example also demonstrates some of the Semantic UI Statistics classes.