Open In App

Blaze UI Headings

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 learn about Blaze UI Headings. Blaze UI provides a large variety of headings. We will learn about each heading class below.

Blaze UI Heading Classes:

  • u-super: This class is used to create a supersize heading which sets the font size to approx 2em.
  • u-xlarge: This class is used to create an extra-large heading which sets the font size to approx 1.5em.
  • u-large: This class is used to create a large heading which sets the font size to approx 1.25em.
  • u-medium: This class is used to create a medium heading which sets set the font size to approx 1em.
  • u-small: This class is used to create a small heading that sets the font size to approx 0.8em.
  • u-xsmall: This class is used to create an extra small heading that sets the font size to approx 0.67em.

Syntax:

<h1 class="c-heading u-super">...</h1>

Note: Use the above-mentioned classes as per the need.

Example 1: In this example, we will learn about super, large, and extra-large headings using u-super, u-large, and u-xlarge classes.

HTML




<html>
  
<head>
    <link rel="stylesheet" href=
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3> Blaze UI Headings</h3>
     
    <h1 class="c-heading u-super" >
        GeeksforGeeks is a computer science portal
    </h1>
    <h1 class="c-heading u-xlarge" >
        GeeksforGeeks is a computer science portal
    </h1>
    <h1 class="c-heading u-large" >
        GeeksforGeeks is a computer science portal
    </h1>
</body>
  
</html>


Output:

 

Example 2: In this example, we will learn about the medium, small and extra-small headings using the u-medium, u-small, and u-xsmall classes.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <link rel="stylesheet" href=
</head>
  
<body>
    <h1 style="color:green">GeeksforGeeks</h1>
    <h3> Blaze UI Headings</h3>
     
    <h1 class="c-heading u-medium" >
        GeeksforGeeks is a computer science portal
    </h1>
    <h1 class="c-heading u-small" >
        GeeksforGeeks is a computer science portal
    </h1>
    <h1 class="c-heading u-xsmall" >
        GeeksforGeeks is a computer science portal
    </h1>    
</body>
</html>


Output:

 

Reference: https://www.blazeui.com/components/headings



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