Foundation CSS Base Typography Blockquotes

Last Updated : 14 Mar, 2022

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails to look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

Foundation CSS Base Typography is used to add the default styles to make the elements more attractive. The base typography makes the life easier by providing simple and attractive elements and classes to build the attractive web page.

Foundation CSS Base Typography Blockquote is used to display the long quotations (a section that is quoted from another source). It changes the alignment to make it unique from others.

Foundation CSS Base Typography Blockquote Tag:

<blockquote> Tag: This tag is used to display the long quotations that changes the alignment to make it unique from others.

Syntax:

<blockquote> Content... </blockquote>

Example 1: In this example, we will describe the use of Foundation CSS Base Typography Blockquote.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
        Foundation CSS Base Typography Blockquotes 
    </title> 
  
    <!-- Compressed CSS -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
  
    <!-- Compressed JavaScript -->
    <script src= 
        "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h2> 
        Foundation CSS Base Typography Blockquotes 
    </h2> 
      
    <blockquote> 
        A Computer Science portal for geeks. It  
        contains well written, well thought and  
        well explained computer science and  
        programming articles... 
    </blockquote> 
  
    <script> 
        $(document).foundation(); 
    </script> 
</body> 
  
</html>

Output:

Example 2: In this example, we will describe the use of Foundation CSS Base Typography Blockquote.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> 
        Foundation CSS Base Typography Blockquotes 
    </title> 
  
    <!-- Compressed CSS -->
    <link rel="stylesheet" href= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css"> 
  
    <!-- Compressed JavaScript -->
    <script src= 
        "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"> 
    </script> 
    <script src= 
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> 
    </script> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
  
    <h2> 
        Foundation CSS Base Typography Blockquotes 
    </h2> 
      
    <blockquote> 
        A Computer Science portal for geeks. It  
        contains well written, well thought and  
        well explained computer science and  
        programming articles... 
        <cite>GeeksforGeeks</cite> 
    </blockquote> 
  
    <script> 
        $(document).foundation(); 
    </script> 
</body> 
  
</html>