 |
VOOZH | about |
|
VOOZH | about |
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.
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.
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