Skip to content
Related Articles

Related Articles

Blaze UI Cards Colors

Improve Article
Save Article
  • Last Updated : 19 Apr, 2022
Improve Article
Save Article

Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.

The Blaze UI Card element displays site content in a manner similar to a playing card using the BlazeUI classes. In this article, we will discuss the colored variations of Blaze UI cards.

To create a colored variation of the Blaze UI card, we use the desired color modifier along with the card class. There are five pre-defined color modifiers in the Blaze UI that are as follows.

Color Modifiers in Blaze UI:

  • –brand: This class creates a dark gray color background for the card.
  • –info: This class creates a blue color background for the card.
  • –warning: This class creates a yellow color background for the card.
  • –success: This class creates a green color background for the card.
  • –error: This class creates a red color background for the card.

Syntax:

<div class="c-card> 
   <div c-card__item c-card__item--brand">...</div>
   ...
</div>

Example 1: This example demonstrates the color variations of the Blaze UI card.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Blaze UI</title>    
    <meta charset="utf-8">
    <meta name="viewport" content=
          "width=device-width, initial-scale=1">    
    <link rel="stylesheet" href=
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <strong>Blaze UI Card Colors</strong>
        <br>
        <div class="c-card" style="max-width:300px;">
            <div class="c-card__item c-card__item--brand">
                This is card with brand color.
            </div>
        </div>
        <div class="c-card" style="max-width:300px;">
            <div class="c-card__item c-card__item--info">
               This is card with info color.
             </div>
        </div>
        <div class="c-card" style="max-width:300px;">
            <div class="c-card__item c-card__item--warning">
              This is card with warning color.
            </div>
        </div>
        <div class="c-card" style="max-width:300px;">
            <div class="c-card__item c-card__item--success">
               This is card with success color.
            </div>
        </div>
        <div class="c-card" style="max-width:300px;">
            <div class="c-card__item c-card__item--error">
              This is card with error color.
            </div>
        </div>
    </center>
</body>
</html>


Output:

 

Example 2: This example demonstrates a color variation on different parts of the same card in Blaze UI.

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Blaze UI</title>
      
    <meta charset="utf-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1">
      
    <link rel="stylesheet" href=
</head>
  
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <strong>Blaze UI Card Colors</strong>
        </br></br>
        <div class="c-card" style="max-width:300px;">
            <div class="c-card__item c-card__item--brand">
                 Header brand color
            </div>
            <div class="c-card__item c-card__item--info">
              <p class="c-paragraph">
                 info color
              </p>
  
            </div>
            <div class="c-card__item c-card__item--warning">
                Warning Color
            </div>
            <div class="c-card__item c-card__item--success">
              <p class="c-paragraph">
                 Success Color
              </p>
  
            </div>
            <div class="c-card__item c-card__item--error">
                 Error color
            </div>
        </div>
    </center>
</body>
</html>


Output:           

 

Reference: https://www.blazeui.com/components/cards/


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!