Blaze UI Typography Emphasising

Last Updated : 14 May, 2022

Blaze UI is a free and open-source CSS 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 see Blaze UI Typography Emphasising. Emphasizing text provides the users to add text in two colors i.e. light and dark, as it helps in identifying which text is important.

Blaze UI Typography Emphasising classes:

u-text–loud: This class is used to add a loud or dark-colored emphasized text.
u-text–quiet: This class is used to add a quiet or light-colored emphasized text.

Syntax:

<div class="u-text--loud">Text here...</div>
<div class="u-text--quiet">Another text here...</div>

Example 1: Below example demonstrates the emphasized text in a <p> tag.

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" /> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
</head> 
  
<body> 
    <div class="u-centered"> 
        <h1 style="color: green"> 
            GeeksforGeeks 
        </h1> 
          
        <h2>Blaze UI Typography Emphasising </h2> 
  
        <p class="u-text--loud"> 
            This is dark colored Emphasised text. 
        </p> 
  
          
        <p class="u-text--quiet"> 
            This is light colored Emphasised text. 
        </p> 
  
    </div> 
</body> 
  
</html>

Output:

Example 2: Below example demonstrates the emphasized text in an <h1> and <h2> tag.

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" /> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
</head> 
  
<body> 
    <div class="u-centered"> 
        <h1 style="color:green"> 
            GeeksforGeeks 
        </h1> 
          
        <h2>Blaze UI Typography Emphasising </h2> 
          
        <h1 class="u-text--loud"> 
            Emphasised text in H1 tag. 
        </h1> 
          
        <h2 class="u-text--quiet"> 
            Emphasised text in H2 tag. 
        </h2> 
    </div> 
</body> 
  
</html>