Blaze UI Cards Block 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 Block Footer is used to create the card footer with buttons pushed to the edges of the card using c-card__footer–block class.

Blaze UI Cards Block Footer Class:

c-card__footer–block: This class is used to push the button to the edges of the card.

Syntax:

<div class="c-card">
  <footer class="c-card__footer 
            c-card__footer--block">
    ....
  </footer>
</div>

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Cards Block 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 Block Footer  
        </h3> 
  
        <div class="c-card"> 
            <header class="c-card__header"> 
                <h2 class="c-heading"> 
                    GeeksforGeeks 
                </h2> 
            </header> 
  
            <footer class="c-card__footer  
                    c-card__footer--block"> 
                <div class="c-input-group"> 
                    <button class="c-button  
                            c-button--block  
                            c-button--success"> 
                        GFG Cards Block Footer 
                    </button> 
                </div> 
            </footer> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Blaze UI Cards Block Footer

Example 2: The following example demonstrates the Blaze UI Cards Block Footer with multiple footer buttons.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Cards Block 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 Block Footer  
        </h3> 
  
        <div class="c-card"> 
            <header class="c-card__header"> 
                <h2 class="c-heading"> 
                    GeeksforGeeks 
                </h2> 
            </header> 
  
            <footer class="c-card__footer  
                    c-card__footer--block"> 
                <div class="c-input-group"> 
                    <button class="c-button  
                            c-button--block  
                            c-button--success"> 
                        GFG Cards Block Footer 
                    </button> 
  
                    <button class="c-button  
                            c-button--block  
                            c-button--info"> 
                        GFG Cards Block Footer 
                    </button> 
  
                    <button class="c-button  
                            c-button--block  
                            c-button--warning"> 
                        GFG Cards Block Footer 
                    </button> 
                </div> 
            </footer> 
        </div> 
    </div> 
</body> 
  
</html>