Open In App

Blaze UI Cards Grouped Items

Improve
Improve
Like Article
Like
Save
Share
Report

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.

Blaze UI Cards Grouped Items is used to group card items by creating a horizontal line. To group items, use the c-card–grouped modifier class to remove the item borders and use c-card__divider class to create the horizontal line.

Blaze UI Cards Grouped Items Classes:

  • c-card–grouped: This class is used to remove the item border.
  • c-card__divider: This class is used to create the divider.

Syntax:

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

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

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title> Blaze UI Cards Grouped Items </title>
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="u-centered">
        <h1 style="color: green;"
            GeeksforGeeks 
        </h1>
        <h3
            Blaze UI Cards Grouped Items 
        </h3
  
        <div class="c-card c-card--grouped">
            <div class="c-card__item">
                GeeksforGeeks 1
            </div>
            <div class="c-card__item">
                GeeksforGeeks 2
            </div>
  
            <div role="separator" 
                class="c-card__divider">
            </div>
  
            <div class="c-card__item"
                GeeksforGeeks 3
            </div>
  
            <div role="separator" 
                class="c-card__divider">
            </div>
  
            <div class="c-card__item"
                GeeksforGeeks 4
            </div>
            <div class="c-card__item"
                GeeksforGeeks 5
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Blaze UI Cards Grouped Items

Example 2: The following example demonstrates the Blaze UI Cards Grouped Items with images.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title> Blaze UI Cards Grouped Items </title>
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="u-centered">
        <h1 style="color: green;"
            GeeksforGeeks 
        </h1>
        <h3
            Blaze UI Cards Grouped Items 
        </h3
  
        <div class="c-card c-card--grouped">
            <div class="c-card__item">
                GeeksforGeeks 1
            </div>
            <div class="c-card__item  ">
                <img src=
            </div>
  
            <div role="separator" 
                class="c-card__divider">
            </div>
  
            <div class="c-card__item">
                <img src=
            </div>
  
            <div role="separator" 
                class="c-card__divider">
            </div>
  
            <div class="c-card__item"
                GeeksforGeeks 4
            </div>
            <div class="c-card__item"
                GeeksforGeeks 5
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Blaze UI Cards Grouped Items

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



Last Updated : 05 May, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads