Open In App

Blaze UI Headings Medium

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.

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, Medium heading, extra small heading, and more. In this article, we will learn about the Medium heading.

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

Classes used for Medium Heading:

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

Syntax:

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

Example 1: This example demonstrates the medium 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=
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <strong>Blaze UI medium heading</strong>
        <br>
        <div class="c-heading u-medium">
            medium heading in div element
        </div>
        <span class="c-heading u-medium">
            medium heading in span element
        </span>
    </center>
</body>
</html>


Output:

Output

Example 2: This example demonstrates the medium 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=
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <strong>Blaze UI medium heading</strong>
        <br>
        <h1 class="c-heading u-medium">
            medium heading in h1 element
        </h1>
        <h2 class="c-heading u-medium">
            medium heading in h2 element
        </h2>
        <h3 class="c-heading u-medium">
            medium heading in h3 element
        </h3>
        <h4 class="c-heading u-medium">
            medium heading in h4 element
        </h4>
        <h5 class="c-heading u-medium">
            medium heading in h5 element
        </h5>
        <h6 class="c-heading u-medium">
            medium heading in h6 element
        </h6>
    </center>
</body>
</html>


Output:

Output

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



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