Foundation CSS Card
Last Updated :
13 Feb, 2022
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:
HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
</head>
<body>
<div class="card" style="width: 300px;">
<div class="card-divider">
Cards in Foundation CSS
</div>
<img src=
<div class="card-section">
<h4>This is a card.</h4>
<p>This is the body of the card.</p>
</div>
</div>
</body>
</html>
|
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.
HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
</head>
<body>
<div class="card" style="width: 300px;">
<div class="card-divider">
Card in Foundation CSS
</div>
<div class="card-section">
<img src=
<h4>This is a card.</h4>
<p>This is the body of the card.</p>
</div>
</div>
</body>
</html>
|
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.
HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
</head>
<body>
<ul style="display: flex; list-style: none;">
<li>
<div class="card" style="width: 500px;">
<div class="card-divider">
Bigger Card
</div>
<img src=
<div class="card-section">
<h4>This is a card.</h4>
<p>This is the body of the card.</p>
</div>
</div>
</li>
<li>
<div class="card" style="width: 300px;">
<div class="card-divider">
Smaller card
</div>
<img src=
<div class="card-section">
<h4>This is a card.</h4>
<p>This is the body of the card.</p>
</div>
</div>
</li>
</ul>
</body>
</html>
|
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:
HTML
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href=
<script src=
</script>
</head>
<body>
<div class="grid-container">
<div class="grid-x grid-margin-x
small-up-2 medium-up-4">
<div class="cell">
<div class="card">
<img src="
<div class="card-section">
<h4>Foundation CSS Card</h4>
<p>This is the card body</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src=
<div class="card-section">
<h4>Foundation CSS Card</h4>
<p>This is the card body</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src=
<div class="card-section">
<h4>Foundation CSS Card</h4>
<p>This is the card body</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src=
<div class="card-section">
<h4>Foundation CSS Card</h4>
<p>This is the card body</p>
</div>
</div>
</div>
</div>
<div class="grid-x grid-margin-x
small-up-2 medium-up-4">
<div class="cell">
<div class="card">
<img src=
<div class="card-section">
<h4>Foundation CSS Card</h4>
<p>This is the card body</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src=
<div class="card-section">
<h4>Foundation CSS Card</h4>
<p>This is the card body</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src=
<div class="card-section">
<h4>Foundation CSS Card</h4>
<p>This is the card body</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src=
<div class="card-section">
<h4>Foundation CSS Card</h4>
<p>This is the card body</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...