Blaze UI Cards Header Body and Footer

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 Header, Body and Footer are used to create the card header, body, and footer elements using the below classes.

Blaze UI Cards Header, Body, and Footer Classes:

c-card__header: This class is used to create the card header.
c-card__body: This class is used to create the card body.
c-card__footer: This class is used to create the card footer.

Syntax:

<div class="c-card">
  <header class="c-card__header">
    ...
  </header>
  <div class="c-card__body">
    ...
  </div>
  <footer class="c-card__footer">
    ...
  </footer>
</div>

Example 1: The following example demonstrates the Blaze UI Cards Header, Body, and Footer.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Cards Header, Body and Footer </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 Header, Body and Footer  
        </h3> 
  
        <div class="c-card"> 
            <header class="c-card__header"> 
                <h2 class="c-heading"> 
                    GeeksforGeeks Heading 
                </h2> 
            </header> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Blaze UI Cards Header, Body, and Footer

Example 2: The following example demonstrates the Blaze UI Cards Header, Body, and Footer.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Cards Header, Body and Footer </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 Header, Body and Footer  
        </h3> 
  
        <div class="c-card"> 
            <header class="c-card__header"> 
                <h2 class="c-heading"> 
                    GeeksforGeeks Header 
                </h2> 
            </header> 
  
            <div class="c-card__body"> 
                <p> 
                    GeeksforGeeks Card Body 
                </p> 
            </div> 
  
            <footer class="c-card__footer"> 
                <h4> This is Footer </h4> 
                <div class="c-input-group"> 
                    <button class="c-button  
                            c-button--block  
                            c-button--success"> 
                        GFG Footer 
                    </button> 
                </div> 
            </footer> 
        </div> 
    </div> 
</body> 
  
</html>