Skip to content
Related Articles

Related Articles

Blaze UI Letter Boxes

View Discussion
Improve Article
Save Article
  • Last Updated : 25 Apr, 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 Letter Boxes. Letter Boxes provide padding to the top and bottom of an element. Letter Boxes are available in eight different sizes mentioned below.

Blaze UI Letter Boxes Classes:

  • u-letter-box-super: This class is used when we need a super-sized letterbox.
  • u-letter-box-xlarge: This class is used when we need an extra large-sized letterbox.
  • u-letter-box-large: This class is used when we need a large-sized letterbox.
  • u-letter-box-medium: This class is used when we need a medium-sized letterbox.
  • u-letter-box-small: This class is used when we need a small-sized letterbox.
  • u-letter-box-xsmall: This class is used when we need an extra small-sized letterbox.
  • u-letter-box-tiny: This class is used when we need a tiny-sized letterbox.
  • u-letter-box-none: This class is used when we need a letterbox with zero padding.

Syntax:

<div class="u-letter-box-small">
    ...
</div>

Example 1: The example below shows the use of super, extra-large, large, and medium-sized letter boxes. The padding has a light green color and the content has green color.

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>Letter Boxes | Blaze UI</title>
    <link rel="stylesheet" href=
  
    <style>
        html {
            font-family: sans-serif;
            text-align: center;
        }
  
        .box{
            margin-top: 30px;
            background-color: #99e399;
        }
    </style>
</head>
  
<body>
    <div>
        <h2 style="color: green;">GeeksforGeeks</h2>
        <h3>Letter Boxes - Blaze UI</h3>
    </div>
  
    <div class="u-letter-box-super box">
        <p style="background-color: green;">u-letter-box-super</p>
  
    </div>
  
    <div class="u-letter-box-xlarge box">
        <p style="background-color: green;">u-letter-box-xlarge</p>
  
    </div>
  
    <div class="u-letter-box-large box">
        <p style="background-color: green;">u-letter-box-large</p>
  
    </div>
  
    <div class="u-letter-box-medium box">
        <p style="background-color: green;">u-letter-box-medium</p>
  
    </div>
</body>
  
</html>

Output:

 

Example 2: The example below shows the small, extra-small, tiny, and zero-sized Letter Boxes.

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>Letter Boxes | Blaze UI</title>
    <link rel="stylesheet" href=
  
    <style>
        html {
            font-family: sans-serif;
            text-align: center;
        }
  
        .box{
            margin-top: 30px;
            background-color: #99e399;
        }
    </style>
</head>
  
<body>
    <div>
        <h2 style="color: green;">GeeksforGeeks</h2>
        <h3>Letter Boxes - Blaze UI</h3>
    </div>
  
    <div class="u-letter-box-small box">
        <p style="background-color: green;">u-letter-box-small</p>
  
    </div>
  
    <div class="u-letter-box-xsmall box">
        <p style="background-color: green;">u-letter-box-xsmall</p>
  
    </div>
  
    <div class="u-letter-box-tiny box">
        <p style="background-color: green;">u-letter-box-tiny</p>
  
    </div>
  
    <div class="u-letter-box-none box">
        <p style="background-color: green;">u-letter-box-none</p>
  
    </div>
</body>
  
</html>

Output:

 

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!