Foundation CSS Card Basics

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.

Output:

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

Output:

Reference: https://get.foundation/sites/docs/card.html#basics