Blaze UI Typography Highlighting Text

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.

In this article, we will learn about Blaze UI Typography Highlighting Text. Blaze UI Typography Highlighting Text is used to write highlighted text. Highlighting a text means providing a background color to the text.

Class:

u-text–highlight: This class is used to highlight the text. By default, it provides a yellow color.

Syntax:

<p class="u-text--highlight">
    Content
</p>

Example 1: In this example, we will u-text–highlight to demonstrate how we can highlight the text.

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 Typography Highlighted</h3> 
    <span class="u-text--highlight"> 
        GeeksforGeeks is a computer science portal 
    </span> 
</body> 
</html>

Output:

Example 2: In this example, we will highlight a heading and paragraph. Also, we will provide a different color to the Highlighted text.

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 class="u-text--highlight" 
        style="background-color:violet !important;"> 
        Blaze UI Typography Highlighted 
    </h3> 
    <br><br> 
    <p class="u-text--highlight"> 
        GeeksforGeeks is a computer science portal 
    </p> 
  
</body> 
</html>