Blaze UI Cards Header Body and Footer
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;"> w3wiki </h1> <h3> Blaze UI Cards Header, Body and Footer </h3> <div class="c-card"> <header class="c-card__header"> <h2 class="c-heading"> w3wiki 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;"> w3wiki </h1> <h3> Blaze UI Cards Header, Body and Footer </h3> <div class="c-card"> <header class="c-card__header"> <h2 class="c-heading"> w3wiki Header </h2> </header> <div class="c-card__body"> <p> w3wiki 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> |
Output:
Blaze UI Cards Header, Body, and Footer
Reference: https://www.blazeui.com/components/cards/