Skip to content
Related Articles

Related Articles

Bulma Card Variables

Improve Article
Save Article
  • Last Updated : 29 Aug, 2022
Improve Article
Save Article

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=
    <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




<html>
  
<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width,initial-scale=1">
    <link rel="stylesheet" href=
    <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


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!