Foundation CSS Card Sass Reference
Last Updated :
01 Sep, 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.
Variable Used:
| Variable-Name |
Description |
Type |
Default-Value |
| $card-background |
This variable is used to define the default background color. |
Color |
$white |
| $card-font-color |
This variable is used to define the default font color for cards. |
Color |
$body-font-color |
| $card-divider-background |
This variable is used to define the default background. |
Color |
$light-gray |
| $card-border |
This variable is used to define the default border style. |
List |
1px solid $light-gray |
| $card-shadow |
This variable is used to define the default card shadow. |
List |
none |
| $card-border-radius |
This variable is used to define the default border-radius. |
List |
$global-radius |
| $card-padding |
This variable is used to define the default padding. |
Number |
$global-padding |
| $card-margin-bottom |
This variable is used to define the default bottom margin. |
Number |
$global-margin |
Example 1: In the above example we will make use of the above variable to demonstrate the use of a card.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>GeeksforGeeks</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href=
<script src=
</script>
</head>
<body style="margin: 20px;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
A computer science portal for geeks
</h3>
<div class="card" style="width: 300px;">
<div class="card-divider">
GeeksforGeeks
</div>
<img src=
<div class="card-section">
<h4>
This is a card.
</h4>
<p>
This is the body of the card.
</p>
</div>
</div>
</center>
</body>
</html>
|
SASS Code:
$card-background:white;
.card{
background-color:$card-background;
}
Compiled CSS Code:
.card {
background-color: white; }
Output:
Example 2: In the above example we will make use of the above variable to demonstrate the use of a card.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>GeeksforGeeks</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href=
<script src=
</script>
</head>
<body style="margin: 20px;">
<center>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
A computer science portal for geeks
</h3>
<div class="card" style="width: 300px;">
<div class="card-divider">
GeeksforGeeks
</div>
<img src=
<div class="card-section">
<h4>
This is a card.
</h4>
<p>
This is the body of the card.
</p>
</div>
</div>
</center>
</body>
</html>
|
SASS Code:
$card-shadow:none;
.card{
box-shadow:$card-shadow;
}
Compiled CSS Code:
.card {
box-shadow: none;
}
Output:
Reference: https://get.foundation/sites/docs/card.html#sass-reference
Share your thoughts in the comments
Please Login to comment...