Skip to content
Related Articles

Related Articles

Blaze UI Basics Card

Improve Article
Save Article
  • Last Updated : 06 May, 2022
Improve Article
Save Article

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/


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!