Skip to content
Related Articles

Related Articles

Blaze UI Typography Abbreviations

Improve Article
Save Article
  • Last Updated : 19 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.

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


Output:

Output

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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!