Semantic-UI Statistics Variations Size Variant

The Semantic-UI framework offers a variety of statistics variations that allow programmers to display data in a visually appealing and meaningful way. One such variation is the size variant, which enables programmers to modify the size of the statistics component to fit their design needs.

Usage

To use the size variant in Semantic-UI, you can apply one of the following size classes to the statistics component:

• .mini: Displays a smaller version of the statistics component.
• .tiny: Displays a slightly larger version than .mini.
• .small: Displays a small version of the statistics component.
• .large: Displays a larger version than the default size.
• .big: Displays a bigger version than .large.
• .huge: Displays a huge version of the statistics component.
• .massive: Displays a significantly larger version than .huge.

Example

Here is an example of using the size variant with the statistics component in Semantic-UI:

<div class="ui statistics">
  <div class="teal statistic mini">
    <div class="value">10</div>
    <div class="label">Items</div>
  </div>
  <div class="ui teal statistic tiny">
    <div class="value">25</div>
    <div class="label">Products</div>
  </div>
  <div class="ui teal statistic small">
    <div class="value">50</div>
    <div class="label">Sales</div>
  </div>
  <div class="ui teal statistic">
    <div class="value">100</div>
    <div class="label">Customers</div>
  </div>
  <div class="ui teal statistic large">
    <div class="value">500</div>
    <div class="label">Users</div>
  </div>
  <div class="ui teal statistic big">
    <div class="value">1000</div>
    <div class="label">Downloads</div>
  </div>
  <div class="ui teal statistic huge">
    <div class="value">10000</div>
    <div class="label">Visitors</div>
  </div>
  <div class="ui teal statistic massive">
    <div class="value">100000</div>
    <div class="label">Likes</div>
  </div>
</div>

In this example, we have used the .ui class to define a statistics container, and then applied different size classes like .mini, .tiny, .small, .large, .big, .huge, and .massive to individual statistic components.

Result

The above example will render the statistics components with different sizes:

• The first component with class .mini will be the smallest.
• The second component with class .tiny will be slightly larger than .mini.
• The third component with class .small will be small in size.
• The fourth component will have the default size.
• The fifth component will be larger than the default size.
• The sixth component will be bigger than the .large size.
• The seventh component will be huge in size.
• The last component will be significantly larger with the .massive size.

Feel free to customize the size of the statistics components according to your specific needs using the available Semantic-UI size classes.