Blaze UI es un marco de código abierto de CSS . Es un conjunto de herramientas de interfaz de usuario liviano y proporciona excelentes herramientas para crear aplicaciones personalizadas y escalables. Puede funcionar con cualquier framework que exista. Puede adaptarse a cualquier ecosistema. Todos los diseños o CSS son móviles primero y, por lo tanto, receptivos. Su proyecto está disponible en código abierto, por lo que una gran comunidad lo mantiene.
El elemento Tarjeta de interfaz de usuario de Blaze muestra el contenido del sitio de manera similar a un naipe que utiliza las clases de interfaz de usuario de Blaze. El encabezado, el cuerpo y el pie de página de las tarjetas de interfaz de usuario de Blaze se utilizan para crear los elementos de encabezado, cuerpo y pie de página de la tarjeta mediante las siguientes clases.
Clases de encabezado, cuerpo y pie de página de Blaze UI Cards:
- c-card__header: esta clase se utiliza para crear el encabezado de la tarjeta.
- c-card__body: Esta clase se utiliza para crear el cuerpo de la tarjeta.
- c-card__footer: esta clase se utiliza para crear el pie de página de la tarjeta.
Sintaxis:
<div class="c-card">
<header class="c-card__header">
...
</header>
<div class="c-card__body">
...
</div>
<footer class="c-card__footer">
...
</footer>
</div>
Ejemplo 1: el siguiente ejemplo muestra el encabezado, el cuerpo y el pie de página de las tarjetas de interfaz de usuario de Blaze.
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>
Producción:
Encabezado, cuerpo y pie de página de las tarjetas Blaze UI
Ejemplo 2: el siguiente ejemplo muestra el encabezado, el cuerpo y el pie de página de las tarjetas de interfaz de usuario de Blaze.
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>
Producción:
Encabezado, cuerpo y pie de página de las tarjetas Blaze UI
Referencia: https://www.blazeui.com/components/cards/
Publicación traducida automáticamente
Artículo escrito por harendra4373 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA