Foundation CSS Typography Helpers Subheader

Last Updated : 24 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 Sub Header Typographic helper.

Foundation CSS Sub-header typographic helper lightens up the header content by increasing the transparency of the text. To convert a text block to a subheader in Foundation CSS, we use the subheader class. This class can be applied to any tag with a text block content i.e. <div>, <span> or <h1> tags.

Foundation CSS Subheader Typographic Helper Class:

subheader: This class lightens the textual content by increasing transparency.

Syntax:

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

Example:

The following example demonstrates the subheader typographic helper class in <div>, <span>, <p> and <h1> to <h6> tags.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <!-- 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 Subheader Typographic Helper</strong> 
    <br /><br /> 
    <div class="subheader"> 
        div with subheader helper class 
    </div> 
    <span class="subheader"> 
        span with subheader helper class 
    </span> 
    <p class="subheader"> 
        p with subheader helper class 
    </p> 
  
    <h1 class="subheader"> 
        h1 with subheader helper class 
    </h1> 
    <h2 class="subheader"> 
        h2 with subheader helper class 
    </h2> 
    <h3 class="subheader"> 
        h3 with subheader helper class 
    </h3> 
    <h4 class="subheader"> 
        h4 with subheader helper class 
    </h4> 
    <h5 class="subheader"> 
        h5 with subheader helper class 
    </h5> 
    <h6 class="subheader"> 
        h6 with subheader helper class 
    </h6> 
</body> 
  
</html>