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 Card Items se utiliza para crear elementos de tarjeta mediante la clase c-card__item . En este artículo, discutiremos cómo crear elementos de tarjetas.
Tarjetas Blaze UI Clase de artículos de tarjeta:
- c-card__item: esta clase se utiliza para crear el elemento de la tarjeta.
Sintaxis:
<div class="c-card">
<div class="c-card__item">
...
</div>
</div>
Ejemplo 1: el siguiente ejemplo muestra los elementos de tarjeta de las tarjetas de interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Cards Card Items </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 Card Items </h3> <div class="c-card"> <div class="c-card__item"> GeeksforGeeks Item 1 </div> <div class="c-card__item"> GeeksforGeeks Item 2 </div> <div class="c-card__item"> GeeksforGeeks Item 3 </div> <div class="c-card__item"> GeeksforGeeks Item 4 </div> </div> </div> </body> </html>
Producción:
Tarjetas Blaze UI Artículos de tarjeta
Ejemplo 2: el siguiente ejemplo muestra los elementos de tarjeta de las tarjetas de interfaz de usuario de Blaze utilizando algunos elementos y divisores.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Cards Card Items </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 Card Items </h3> <div class="c-card"> <div class="c-card__item"> GeeksforGeeks Item 1 </div> <div class="c-card__item"> GeeksforGeeks Item 2 </div> <div role="separator" class="c-card__item c-card__item--divider"> GFG Separator </div> <div class="c-card__item"> GeeksforGeeks Item 3 </div> <div class="c-card__item"> <button class="c-button c-button--block "> GFG Button </button> </div> </div> </div> </body> </html>
Producción:
Tarjetas Blaze UI Artículos de tarjeta
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