Blaze UI Typography Blockquote

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, Blockquote, and much more. In this article, we will discuss the Blockquote typography class in Blaze UI.

A block quotation is a quotation in a written document that is set off from the main text like a paragraph or block of text along with the name of the person that quoted it. To create a blockquote in Blaze UI, we use the u-blockquote class on <blockquote> element. To add a text in <blockquote> element, we use the u-blockquote__body class on <div> element and for name of quoter, we use the u-blockquote__footer class on <footer> element.

Blockquote Typography Used Classes:

.u-blockquote: This converts a basic <blockquote> to Blaze UI blockquote.
u-blockquote__body: This is used to style text paragraph block of the blockquote.
u-blockquote__footer: This is used to style the quote name on the blockquote.

Syntax:

<blockquote class="u-blockquote">
  <div class="u-blockquote__body">
    ...
  </div>
  <footer class="u-blockquote__footer">...</footer>
</blockquote>

Example 1:This example demonstrates the basic blockquote without a quoter name in Blaze UI using u-blockquote and u-blockquote__body classes.

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 Blockquote Typography</strong> 
        <br> 
        <blockquote class="u-blockquote"> 
            <div class="u-blockquote__body"> 
              Geeksforgeeks is the biggest computer  
              science portal in the whole world. 
            </div> 
        </blockquote> 
    </center> 
</body> 
</html>

Output:

Output

Example 2: This example demonstrates the u-blockquote, u-blockquote__body, and u-blockquote__footer classes.

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 Blockquote Typography</strong> 
        <br> 
        <blockquote class="u-blockquote"> 
            <div class="u-blockquote__body"> 
              Geeksforgeeks is the biggest computer  
              science portal in the whole world. 
            </div> 
            <footer class="u-blockquote__footer">-Priyank </footer> 
        </blockquote> 
    </center> 
</body> 
  
</html>