Blaze UI Cards Images

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 Images is used to add the images in the card using the o-image class. In this article, we will discuss Blaze UI Cards Images.

Blaze UI Cards Images Class:

o-image: This class is used to add the image to the card.

Syntax:

<div class="c-card">
      <img class="o-image" src="...">
      ....
</div>

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Cards Images </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 Images </h3>  
  
        <div class="c-card"> 
            <img class="o-image" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220427162344/gfgimage.jpg" > 
                   
            <header class="c-card__header"> 
                <h2 class="c-heading"> 
                    GeeksforGeeks Image 
                </h2> 
            </header> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Blaze UI Cards Images

Example 2: The following example demonstrates the Blaze UI Cards Images.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Cards Images </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 Images </h3>  
  
        <div class="c-card"> 
            <img class="o-image" src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220427162638/gfgimg.jpg" > 
                   
            <header class="c-card__header"> 
                <h2 class="c-heading"> 
                    GeeksforGeeks Image 
                </h2> 
            </header> 
  
            <div class="c-card__body"> 
                <p> 
                    A Computer Science portal for geeks.  
                </p> 
            </div> 
  
            <footer class="c-card__footer  
                    c-card__footer--block"> 
                <button class="c-button  
                        c-button--block  
                        c-button--info"> 
                    GFG Button 
                </button> 
            </footer> 
        </div> 
    </div> 
</body> 
  
</html>