Skip to content
Related Articles

Related Articles

Blaze UI Sizes

View Discussion
Improve Article
Save Article
  • Last Updated : 05 May, 2022
View Discussion
Improve Article
Save Article

Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.

In this article, we will be seeing Blaze UI Sizes. Blaze UI provides six utility classes to control the size of an element which are listed below.

Blaze UI Sizes Classes:

  • u-xsmall: This class is used to make the size of the element extra-small.
  • u-small: This class is used to make the size of the element small.
  • u-medium: This class is used to make the size of the element medium.
  • u-large: This class is used to make the size of the element large.
  • u-xlarge: This class is used to make the size of the element extra-large.
  • u-super: This class is used to make the size of the element super, which is bigger than extra-large.

Syntax:

<div class="u-medium"> ... </div>

Example 1: This example illustrates the use of the above six size utility classes provided by Blaze UI on the button element.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
                "width=device-width, initial-scale=1.0">
    <title> Blaze UI - Sizes </title>
    <link rel="stylesheet" href=
  
    <style>
        body {
            font-family: sans-serif;
            text-align: center;
        }
        .wrapper{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        /* Bottom margin to separate the buttons */
        .wrapper>button{
            margin-bottom: 10px;
        }
    </style>
</head>
  
<body>
    <h2 style="color: green;"> GeeksforGeeks </h2>
    <h3> Blaze UI - Sizes </h3>
  
    <div class="u-window-box-large wrapper">
        <button type="button" class="c-button u-xsmall">
            Extra Small Button
        </button>
        <button type="button" class="c-button u-small">
            Small Button
        </button>
        <button type="button" class="c-button u-medium">
            Medium Button
        </button>
        <button type="button" class="c-button u-large">
            Large Button
        </button>
        <button type="button" class="c-button u-xlarge">
            Extra Large Button
        </button>
        <button type="button" class="c-button u-super">
            Super Sized Button
        </button>
    </div>
</body>
  
</html>


Output:

Blaze UI Sizes

Note: The size utility classes have no effect on the image element. 

Example 2: This example shows the use of size utility classes with the images.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
                "width=device-width, initial-scale=1.0">
    <title> Blaze UI - Sizes </title>
    <link rel="stylesheet" href=
  
    <style>
        body {
            font-family: sans-serif;
            text-align: center;
        }
        .wrapper{
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        /* Bottom margin to separate the images */
        .wrapper>img{
            margin-bottom: 20px;
        }
    </style>
</head>
  
<body>
    <h2 style="color: green;"> GeeksforGeeks </h2>
    <h3> Blaze UI - Sizes </h3>
      
    <div class="u-window-box-large wrapper">
        <img class="u-small" src=
             alt="gfg_logo"
        />
  
        <img class="u-large" src=
             alt="gfg_logo"
        />
    </div>
</body>
  
</html>


Output:

Blaze UI Sizes

Reference: https://www.blazeui.com/utils/sizes


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!