Blaze UI Cards Card Items

Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit and provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. It project is available open-source so a large community maintains it.

The Blaze UI Card element displays site content in a manner similar to a playing card using the Blaze UI classes. Blaze UI Cards Card Items is used to create card items using the c-card__item class. In this article, we will discuss how to create card items.

Blaze UI Cards Card Items Class:

c-card__item: This class is used to create the card item.

Syntax:

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

Example 1: The following example demonstrates the Blaze UI Cards Card Items.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Cards Card Items </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
</head> 
  
<body> 
    <div class="u-centered"> 
        <h1 style="color: green;">  
            w3wiki  
        </h1> 
        <h3> Blaze UI Cards Card Items </h3>  
  
        <div class="c-card"> 
            <div class="c-card__item"> 
                w3wiki Item 1 
            </div> 
            <div class="c-card__item"> 
                w3wiki Item 2 
            </div> 
            <div class="c-card__item"> 
                w3wiki Item 3 
            </div> 
            <div class="c-card__item"> 
                w3wiki Item 4 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Blaze UI Cards Card Items

Example 2: The following example demonstrates the Blaze UI Cards Card Items using some items and dividers.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Cards Card Items </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
</head> 
  
<body> 
    <div class="u-centered"> 
        <h1 style="color: green;">  
            w3wiki  
        </h1> 
        <h3> Blaze UI Cards Card Items </h3>  
  
        <div class="c-card"> 
            <div class="c-card__item"> 
                w3wiki Item 1 
            </div> 
            <div class="c-card__item"> 
                w3wiki Item 2 
            </div> 
  
            <div role="separator" 
                class="c-card__item  
                c-card__item--divider"> 
                GFG Separator 
            </div> 
  
            <div class="c-card__item"> 
                w3wiki Item 3 
            </div> 
            <div class="c-card__item"> 
                <button class="c-button  
                        c-button--block "> 
                    GFG Button 
                </button> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Blaze UI Cards Card Items

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

HTML

HTML

Contact Us