Bulma Card Variables
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.
HTML
<!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;" > w3wiki </ h1 > < h3 class = "subtitle" > A computer science portal for Beginner </ 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' > w3wiki 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 Beginner 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
< 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;" > w3wiki </ h1 > < h3 class = "subtitle" > A computer science portal for Beginner </ 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' > w3wiki 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 Beginner 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