Blaze UI Typography Abbreviations

Last Updated : 19 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.

Blaze UI comes bundled with a great typography module that covers different text visualizations. There are multiple types of Typography classes in Blaze UI such as Hyperlink, Gradient Text, Highlighted Text, Abbreviation Text, Blockquote, and much more. In this article, we will discuss the Abbreviation typography class in Blaze UI.

The Abbreviation text typography makes text visibly stand out which on hover shows the full form of abbreviation. To create Abbreviation text typography in the Blaze UI, we use the u-text–help class. The u-text–help class converts the scaffold text into an abbreviation or acronym. This class can be used with <abbr> HTML element.

Class Used for the Abbreviation text typography:

.u-text–help: This class converts the text block to an abbreviation.

Syntax:

<abbr class="u-text--help" title="Full form">Abbreviation</abbr>

Example 1:The following example demonstrates the default abbreviation with a title on hover text typography in Blaze UI.

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 Abbreviation text typography</strong> 
        <br> 
        <abbr class="u-text--help" title="Geeksforgeeks">GFG</abbr>  
         is the best coding platform. 
    </center> 
</body> 
  
</html> 

Output:

Output

Example 2: The following example demonstrates multiple abbreviations in the same line of text in Blaze UI.

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 Abbreviation text typography</strong> 
        <br> 
        <abbr class="u-text--help" title="geeksforgeeks">GFG</abbr>  
            is the best coding platform. <br/> 
            It helps us in learning  
        <abbr class="u-text--help" 
            title="Data Structure and Algorithm">DSA</abbr>  
              and  
        <abbr class="u-text--help" title="Competitive Programming"> 
          CP</abbr> at one place. 
    </center> 
</body> 
</html> 