Bulma is a free and open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.
A Bulma Card is a flexible component that can be composed of the content needed. It includes several other components that we have to add exclusively to design our content well.
Variable Used:
| Variable-Name | Description. | Type | Value | Computed Value | Computed Type |
|---|---|---|---|---|---|
| $card-color | This variable is used to provide color to the card. | variable | $text | hsl(0, 0%, 29%) | color |
| $card-background-color | This variable is used to provide background color to the card. | variable | $scheme-main | hsl(0, 0%, 100%) | color |
| $card-shadow | This variable is used to provide shadow to the card. | variable | $shadow | 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) | shadow |
| $card-radius | This variable is used to define the radius of the card. | size | 0.25rem | ||
| $card-header-background-color | This variable is used to provide background color to the header. | string | transparent | ||
| $card-header-color | This variable is used to provide color to the header. | variable | $text-strong | hsl(0, 0%, 21%) | color |
| $card-header-padding | This variable is used to define padding to the header. | size | 0.75rem 1rem | ||
| $card-header-shadow | This variable is used to provide shadow to the header. | shadow | 0 0.125em 0.25em rgba($scheme-invert, 0.1) | ||
| $card-header-weight | This variable is used to provide weight to the header. | variable | $weight-bold | 700 | font-weight |
| $card-content-background-color | This variable is used to provide background color to the content. | string | transparent | ||
| $card-content-padding | This variable is used to provide padding to the content. | size | 1.5rem | ||
| $card-footer-background-color | This variable is used to provide a background color to the footer of the card. | string | transparent | ||
| $card-footer-border-top | This variable is used to provide a border-top to the footer. | size | 1px solid $border-light | ||
| $card-footer-padding | This variable is used to provide padding to the footer. | size | 0.75rem | ||
| $card-media-margin | This variable is used to provide a margin to the card. | variable | $block-spacing | 1.5rem | size |
Example 1: In the below code, we will make use of the above variable to modify the card.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<link rel="stylesheet" href="style.css">
<title>Bulma Variable</title>
</head>
<body>
<center>
<h1 class="title" style="color:green;" >
GeeksforGeeks
</h1>
<h3 class="subtitle">
A computer science portal for geeks
</h3>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="card">
<div class="card-content">
<p class='is-success'>
GeeksforGeeks is a computer
science portal.it was created
with a goal in mind to provide
well written, well thought and
well explained solutions for
selected questions. The core
team of five super geeks
constituting of technology lovers
and computer science enthusiasts
have been constantly working
in this direction .
</p>
</div>
</div>
</div>
</div>
</div>
</center>
</body>
</html>
SCSS Code:
$card-color: hsl(0, 0%, 29%);
.card {
color:$card-color;
}
Compiled CSS Code:
.card {
color: #4a4a4a;
}
Output:
Example 2: In the below code, we will make use of the above variable to modify the card.
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1">
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
<link rel="stylesheet" href="style.css">
<title>Bulma Variable</title>
</head>
<body>
<center>
<h1 class="title" style="color:green;" >
GeeksforGeeks
</h1>
<h3 class="subtitle">
A computer science portal for geeks
</h3>
<div class='container has-text-centered'>
<div class='columns is-mobile is-centered'>
<div class='column is-5'>
<div class="card">
<div class="card-content">
<p class='is-success'>
GeeksforGeeks is a computer
science portal.it was created
with a goal in mind to provide
well written, well thought and
well explained solutions for
selected questions. The core
team of five super geeks
constituting of technology lovers
and computer science enthusiasts
have been constantly working
in this direction .
</p>
</div>
</div>
</div>
</div>
</div>
</center>
</body>
</html>
SCSS Code:
$card-background-color: lightgreen;
.card {
background-color:$card-background-color;
}
CSS Code:
.card {
background-color: lightgreen; }
Output:
Reference: https://bulma.io/documentation/components/card/#variables