Blaze UI Headings Extra Small

Last Updated : 12 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 small heading.

The extra small heading is used to emphasize the heading with bold styling. To create an extra small heading in Blaze UI, we use the .c-heading and .u-xsmall classes. The .c-heading class gives the heading usual styling of blaze class and .u-xsmall makes the size of the heading extra small. These classes can be applied on <h1> to <h6>, <div> and <span> elements.

Class used for Extra Small Heading:

u-xsmall: The .u-xsmall class is used to create the extra small heading.

Syntax:

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

Example 1: This example demonstrates the extra small heading of Blaze UI in the <div> and <span> elements.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Blaze UI</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" 
    content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <strong>Blaze UI extra small heading</strong> 
        <br> 
        <div class="c-heading u-xsmall"> 
            Extra Small heading in div element 
        </div> 
        <span class="c-heading u-xsmall"> 
            Extra Small heading in span element 
        </span> 
    </center> 
</body> 
</html>

Output:

Output

Example 2: This example demonstrates the extra small heading of Blaze UI in the <h1> to <h6> element.

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Blaze UI</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" 
    content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css"> 
</head> 
  
<body> 
    <center> 
        <h1 style="color:green">GeeksforGeeks</h1> 
        <strong>Blaze UI extra small heading</strong> 
        <br> 
        <h1 class="c-heading u-xsmall"> 
            Extra Small heading in h1 element 
        </h1> 
        <h2 class="c-heading u-xsmall"> 
            Extra Small heading in h2 element 
        </h2> 
        <h3 class="c-heading u-xsmall"> 
            Extra Small heading in h3 element 
        </h3> 
        <h4 class="c-heading u-xsmall"> 
            Extra Small heading in h4 element 
        </h4> 
        <h5 class="c-heading u-xsmall"> 
            Extra Small heading in h5 element 
        </h5> 
        <h6 class="c-heading u-xsmall"> 
            Extra Small heading in h6 element 
        </h6> 
    </center> 
</body> 
</html>