Blaze UI Cards Colors
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/
Please Login to comment...