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. Blaze UI Cards Block Footer se usa para crear el pie de página de la tarjeta con botones empujados hacia los bordes de la tarjeta usando la clase c-card__footer–block .
Clase de pie de página de bloque de tarjetas Blaze UI:
- c-card__footer–block: esta clase se usa para empujar el botón hacia los bordes de la tarjeta.
Sintaxis:
<div class="c-card">
<footer class="c-card__footer
c-card__footer--block">
....
</footer>
</div>
Ejemplo 1: el siguiente ejemplo muestra el pie de página del bloque de tarjetas de la interfaz de usuario de Blaze.
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>
Producción:
Pie de página del bloque de tarjetas Blaze UI
Ejemplo 2: El siguiente ejemplo muestra el pie de página del bloque de tarjetas de Blaze UI con varios botones de pie de página.
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>
Producción:
Pie de página del bloque de 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