Skip to content
Related Articles

Related Articles

Blaze UI Typography Highlighting Text

Improve Article
Save Article
  • Last Updated : 12 Apr, 2022
Improve Article
Save Article

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=
</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=
</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>


Output:

 

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!