Blaze UI Headings Extra Large

Last Updated : 21 Apr, 2022

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.

Heading elements are used to emphasize titles by creating bold and big typography. The Blaze UI provides multiple types of headings such as Super heading, Large heading, small heading, extra small heading, and more. In this article, we will learn about the Extra Large Heading. Blaze UI Headings Extra Large is used for making extra-large headings.

Used Class:

c-heading u-xlarge: This class is used to make extra-large headings approx size 1.5em

Syntax:

<h1 class="c-heading u-xlarge">
      Content
</h1>

Example 1: In this example, we will create an extra-large heading.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
</head> 
  
<body> 
    <h1 style="color:green">GeeksforGeeks</h1> 
    <h3> Blaze UI Extra Large Headings</h3> 
  
    <h1 class="c-heading u-xlarge"> 
        GeeksforGeeks is a computer science portal 
    </h1> 
</body> 
  
</html>

Output:

Example 2: In this example, we will create an extra-large heading and provide some styling to it (red color heading)

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
</head> 
  
<body> 
    <h1 style="color:green;"> 
        GeeksforGeeks 
    </h1> 
      
    <h3> Blaze UI Extra Large Headings</h3> 
  
    <h1 class="c-heading u-xlarge" style="color:red"> 
        GeeksforGeeks is a computer science portal 
    </h1> 
</body> 
  
</html>