Open In App

Blaze UI Letter Boxes

Improve
Improve
Like Article
Like
Save
Share
Report

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/



Last Updated : 25 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads