Foundation CSS Card Basics

Last Updated : 07 Mar, 2022

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to layout stunning responsive websites, apps, and emails that appear amazing & can be accessible to any device. In this article, we will learn about Card Basics.

A Foundation CSS Card generally contains a header, an image, a description and a footer. One can omit any of these elements to make a card without an image or a footer. It can be used for displaying multiple small pieces of information on a page.

Foundation CSS Card Classes:

card: This class is used to create a Card component.
card-divider: This class is used to break the card into separate parts. It can be used for creating the header or footer of the card.
card-section: This is used to add padding to the content of the card. It can be used when adding content to the card as the card does not have any padding on its own. This helps it achieve the classical look of the card.

Syntax:

<div class="card">
    <div class="card-divider">
        ...
    </div>
    <div class="card-section">
        ...
    </div>
</div>

Example: This example demonstrates a basic card made using Foundation CSS.

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://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> 
    </script> 
</head> 
  
<body style="padding: 20px;"> 
    <h1 style="color: green"> 
      GeeksforGeeks 
    </h1> 
    <b>Foundation CSS Card Basics</b> 
    <div class="card" style="width: 300px;"> 
        <div class="card-divider"> 
            Japan Trip 
        </div> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220209012810/cardbasicsimg-300x137.png"> 
        <div class="card-section"> 
            <h4>Osaka</h4> 
            <p>You were here for 3 days</p> 
        </div> 
        <div class="card-divider"> 
            3 months ago 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Example 2: This example shows two cards with a divider and a section.

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://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js"> 
    </script> 
</head> 
  
<body style="padding: 20px;"> 
    <h1 style="color: green">GeeksforGeeks</h1> 
    <b>Foundation CSS Card Basics</b> 
    <div class="card" style="width: 300px;"> 
        <div class="card-divider"> 
            <b>DSA Course</b> 
        </div> 
        <div class="card-section"> 
            Learn about data structures and 
            algorithms in this course. 
        </div> 
        <div class="card-divider"> 
            <b>Price:</b> 1499/- 
        </div> 
    </div> 
    <div class="card" style="width: 300px;"> 
        <div class="card-divider"> 
            <b>Competitive Programming Course</b> 
        </div> 
        <div class="card-section"> 
            Learn competitive programming 
            in this course. 
        </div> 
        <div class="card-divider"> 
            <b>Price:</b> 1299/- 
        </div> 
    </div> 
</body> 
  
</html>