Foundation CSS is an open-source and 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 and can be accessible to any device.

One such useful component which is used in modern websites is the Card component. Basically, a Card contains a heading, an image, a description, and a footer. It is seen on numerous websites, for example, on news websites.

Foundation CSS Card Classes:

• card: This class is used to create a Card component.
• card-divider: This class is used to divide the content of the card into multiple parts. This is useful as the card does not have any padding on its own.
• card-section: This is used to divide the card into sections for further dividing the content of the card.

Note: It is not needed to add all the sections when we are making a card. It solely depends on our needs for the website.

Syntax:

<div class=”card”>
    <div class= “card-divider”>
        ...
    </div>
    <img src= “...”  >
    <div class= “card-section”>
        ...
    </div>
</div>

Example:

Output:

Adding images to Card: Images also work well with cards. We can spread an image to the edges by declaring the image within the .card class using the <img> tag. However, if we want to pad the image, we can use the card-section class.

Example: In the below example, we have added the image inside the card-section class.

Output:

Sizing of Cards: We can also add custom CSS to size our cards by using the CSS width property.

Example: In the below example, we have set the size of the two cards using the custom CSS.

Output:

We can also add multiple cards to our website using the Foundation Grid utilities. This allows to space out the cards nicely and make them responsive as well.

Example:

Output: