Foundation CSS Typography Helpers Statistics

Last Updated : 17 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 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, Statistics, and Typescale. In this article, we will learn about the Statistics Typographic helper.

The Foundation CSS Statistics Typographic Helper is used to display some important numbers in a very large font. To use the Statistics Typographic helper in Foundation CSS, we use the “stat” class. The stat class amps up the font size of the element it is applied to and can be used with <p>, <div>, and <span> elements.

Foundation CSS Statistics Typographic Helper Class:

stat: The stat class scales up the font size of the element it is applied on.

Syntax:

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

Example 1: The following example demonstrates the Statistics typographic helper class in the <div> element.

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>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <strong>
        Foundation CSS Statistics Typographic Helper
    </strong>
    <br/><br/>
     
<p>No. of students taking Geeksforgeeks Courses</p>
 
    <div class="stat">9999999</div>    
</body>
 
</html>

Output:

Output

Example 2: The following example demonstrates the Statistics typographic helper class in the <span> element as an inline div.

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>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <strong>
        Foundation CSS Statistics Typographic Helper
    </strong>
    <br/><br/>
     
<p><span class="stat">Y</span>our Technical Interview Round 
               Depends On Data Structures And Algorithms.<br/> 
        <span class="stat">E</span>nroll today. 
        <span class="stat">D</span>ata Structures And 
              Algorithms Is The Key To Selection In 
                Product Based Companies. 
         <br/>
        <span class="stat">G</span>et Certified. 
        <span class="stat">I</span>internship Opportunities. 
                Content Lifetime Validity. 1:1 Doubt Assistance.
    </p>
 
</body>
 
</html>