Foundation CSS Card Sizing
Last Updated :
11 Mar, 2022
Foundation CSS is an open-source and responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing and 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.
The usage of cards on a website enhances the user experience. Foundation CSS gives us a foundation-styled card that can be used according to our needs. Sometimes, we may want to change the size and shape of the card. Foundation CSS allows us to change the card sizing by using various reserved classes.
Foundation CSS Card Sizing Classes:
- card: Creates a container that holds the card content.
- card-divider: Create a section with a darker background, dividing it from the rest of the card content.
- card-section: Create a section that holds the card information.
- small-n: “n” takes a value between 1 and 11 and sizes the card accordingly. It is specified on each card explicitly.
- medium-n: “n” takes a value between 1 and 11 and sizes the card accordingly. It is specified on each card explicitly.
- large-n: “n” takes a value between 1 and 11 and sizes the card accordingly. It is specified on each card explicitly.
- small-up-n: “n” cards are placed in a row for smaller-sized screens.
- medium-up-n: “n” cards are placed in a row for medium-sized screens.
- large-up-n: “n” cards are placed in a row for large-sized screens.
Syntax:
For explicit card sizing:
<div class="cell explicit-card-size-class">
<div class="card">
...
</div>
</div>
For responsive card sizing:
<div class="grid-x small-up-n
medium-up-n
large-up-n">
<div class="cell">
<div class="card">
...
</div>
</div>
...
</div>
Example 1: Changing the card sizes by explicitly specifying the sizes.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Card Sizing</title>
<link rel="stylesheet"
href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
<link rel="stylesheet"
href=
<script src=
</script>
</head>
<body class="grid-x align-middle align-center grid-container"
style="height:95vh;width:95vw;">
<div class="grid-container">
<h2 style="color: green">GeekforGeeks</h2>
<h4>Foundation CSS Card Sizing</h4>
<div class="grid-x grid-margin-x">
<div class="cell medium-3">
<div class="card">
<h5 class="card-divider">Left Card</h5>
<img src=
<div class="card-section">
<h4>I am a medium sized card</h4>
<p>I am styled explicitly</p>
</div>
</div>
</div>
<div class="cell large-6">
<div class="card">
<h5 class="card-divider">Middle Card</h5>
<img src=
<div class="card-section">
<h4>I am a large sized card</h4>
<p>I am styled explicitly</p>
</div>
</div>
</div>
<div class="cell medium-3">
<div class="card">
<h5 class="card-divider">Right Card</h5>
<img src=
<div class="card-section">
<h4>I am a medium sized card</h4>
<p>I am styled explicitly</p>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Card sizing by explicit means
Example 2: Responsive Card Sizing, which places 2 cards on small-sized screens, 3 cards on medium-sized screens, and 4 cards on large-sized screens.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Foundation CSS Card Sizing</title>
<link rel="stylesheet"
href=
crossorigin="anonymous">
<script src=
crossorigin="anonymous">
</script>
<link rel="stylesheet"
href=
<script src=
</script>
</head>
<body class="grid-x align-middle align-center grid-container"
style="height:95vh;width:95vw;">
<div class="grid-container">
<h2 style="color: green">GeekforGeeks</h2>
<h4>Foundation CSS Card Sizing</h4>
<div class="grid-x grid-margin-x small-up-2 medium-up-3 large-up-4">
<div class="cell">
<div class="card">
<h5 class="card-divider">Card Title</h5>
<img src=
<div class="card-section">
<h4>Name of Card</h4>
<p>Responsively Styled</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<h5 class="card-divider">Card Title</h5>
<img src=
<div class="card-section">
<h4>Name of Card</h4>
<p>Responsively Styled</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<h5 class="card-divider">Card Title</h5>
<img src=
<div class="card-section">
<h4>Name of Card</h4>
<p>Responsively Styled</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<h5 class="card-divider">Card Title</h5>
<img src=
<div class="card-section">
<h4>Name of Card</h4>
<p>Responsively Styled</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<h5 class="card-divider">Card Title</h5>
<img src=
<div class="card-section">
<h4>Name of Card</h4>
<p>Responsively Styled</p>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$(document).foundation();
})
</script>
</body>
</html>
|
Output:
Foundation CSS Card Sizing
Reference: https://get.foundation/sites/docs/card.html#sizing
Share your thoughts in the comments
Please Login to comment...