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.

Output:

 

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

Output:           

 

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