Blaze UI Cards Dividers

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 BlazeUI classes. Blaze UI Cards Dividers are used to create the separator between the card items.

Blaze UI Cards Dividers Class:

c-card__item–divider: This class is used to create the divider between the card items.

Syntax:

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

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Cards Dividers </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 Dividers </h3> 
  
        <div class="c-card"> 
            <div class="c-card__item"> 
                A Computer Science portal for geeks.  
            </div> 
  
            <div role="separator" class= 
                "c-card__item c-card__item--divider"> 
                This is divider 
            </div> 
  
            <div class="c-card__item"> 
                It contains well written, well thought 
                and well explained computer science and 
                programming articles. 
            </div> 
        </div> 
    </div> 
</body> 
</html>

Output:

Example 2: The following example demonstrates the Blaze UI Cards Dividers using images.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Cards Dividers </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 Dividers </h3> 
  
        <div class="c-card"> 
            <div class="c-card__item"> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> 
            </div> 
  
            <div role="separator" class= 
                "c-card__item c-card__item--divider"> 
                This is divider 
            </div> 
  
            <div class="c-card__item"> 
                It contains well written, well thought 
                and well explained computer science and 
                programming articles. 
            </div> 
  
            <div role="separator" class= 
                "c-card__item c-card__item--divider"> 
                This is divider 
            </div> 
  
            <div class="c-card__item"> 
                <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png" > 
            </div> 
        </div> 
    </div> 
</body> 
</html>