Blaze UI Cards Colors
Last Updated :
19 Apr, 2022
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/
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...