Open In App

Blaze UI Basics Card

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.

The Blaze UI Card element is used to display the site content in a manner similar to a playing card using the BlazeUI classes. Blaze UI Basics Card is used to create the basic card using the below classes.

Blaze UI Basics Card Classes:

  • c-card: This class is used to create the card.
  • c-card__body: This class is used to create the card body.

Syntax:

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

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

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title> Blaze UI Basics Card </title>
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="u-centered">
        <h1 style="color: green;"
            GeeksforGeeks 
        </h1>
        <h3> Blaze UI Basics Card </h3>
  
        <div class="c-card">
            <div class="c-card__body">
                <p
                  A Computer Science portal for geeks. 
                </p>
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Blaze UI Basics Card

Example 2: The following example demonstrates the Blaze UI Basics Card using an image.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <title> Blaze UI Basics Card </title>
    <link rel="stylesheet" href=
</head>
  
<body>
    <div class="u-centered">
        <h1 style="color: green;"
            GeeksforGeeks 
        </h1>
        <h3> Blaze UI Basics Card </h3>
  
        <div class="c-card">
            <div class="c-card__body">
                <h4> GeeksforGeeks Image </h4>
                <img src=
            </div>
        </div>
    </div>
</body>
  
</html>


Output:

Blaze UI Basics Card

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



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