Foundation CSS Typography Helpers Lead Paragraph

Last Updated : 27 Feb, 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 helper classes allow us to scaffold certain typographic styles faster. Foundation CSS has multiple typography helpers such as Text Alignment, Subheader, Lead Paragraph, Unbulleted List, and Typescale. In this article, we will learn about the Lead Paragraph Typographic helper.

Foundation CSS Lead Paragraph typographic helper creates a slightly larger block of text which is useful for blurbs and other descriptive text. To convert a text block to Lead Paragraph in Foundation CSS, we use the lead class. This class can be applied to any tag with a text block content i.e. <div>, <span> or <h1> tags.

Foundation CSS Lead Paragraph Typographic Helper Class:

lead: This class creates increases the font size slightly to create a larger and bolder block of text.

Syntax:

<div class="lead">Content</div>

Example 1: The following example demonstrates the Lead Paragraph typographic helper class by comparing it to a normal block of text.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Foundation CSS Typography Helpers Lead Paragraph</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 style="padding: 30px;"> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
    <strong>Foundation CSS Lead Paragraph  
            Typographic Helper 
    </strong> 
    <br/><br/> 
    <div>This is a normal block of text.</div> 
    <div class="lead"> 
      This is a block of text with  
      Lead Paragraph helper class.</div> 
</body> 
  
</html>

Output:

Foundation CSS Typography Helpers Lead Paragraph

Example 2: The following example demonstrates the Lead Paragraph typographic helper class in a card with different colors.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title>Foundation CSS Typography Helpers Lead Paragraph</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 style="padding: 30px;"> 
    <h1 style="color: green;"> 
        GeeksforGeeks 
    </h1> 
    <strong>Foundation CSS Lead Paragraph  
            Typographic Helper 
    </strong> 
    <br/><br/> 
    <div class="card" style="width: 300px;"> 
        <div class="card-divider"> 
            This is a normal block. 
        </div> 
        <div class="card-divider"> 
            <div class="lead">This is a lead block.</div> 
        </div> 
        <div class="card-section" style="color: green;"> 
            This is a normal description card.<br/> 
            <div class="lead"> 
                This is a lead description card. 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>