Blaze UI Cards Card Items

Last Updated : 05 May, 2022

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;">  
            GeeksforGeeks  
        </h1> 
        <h3> Blaze UI Cards Card Items </h3>  
  
        <div class="c-card"> 
            <div class="c-card__item"> 
                GeeksforGeeks Item 1 
            </div> 
            <div class="c-card__item"> 
                GeeksforGeeks Item 2 
            </div> 
            <div class="c-card__item"> 
                GeeksforGeeks Item 3 
            </div> 
            <div class="c-card__item"> 
                GeeksforGeeks 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;">  
            GeeksforGeeks  
        </h1> 
        <h3> Blaze UI Cards Card Items </h3>  
  
        <div class="c-card"> 
            <div class="c-card__item"> 
                GeeksforGeeks Item 1 
            </div> 
            <div class="c-card__item"> 
                GeeksforGeeks Item 2 
            </div> 
  
            <div role="separator" 
                class="c-card__item  
                c-card__item--divider"> 
                GFG Separator 
            </div> 
  
            <div class="c-card__item"> 
                GeeksforGeeks Item 3 
            </div> 
            <div class="c-card__item"> 
                <button class="c-button  
                        c-button--block "> 
                    GFG Button 
                </button> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>