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 Blaze UI Card se usa para mostrar el contenido del sitio de una manera similar a un naipe usando las clases BlazeUI. Blaze UI Basics Card se usa para crear la tarjeta básica usando las siguientes clases.
Clases de tarjetas básicas de Blaze UI:
- c-card: Esta clase se utiliza para crear la tarjeta.
- c-card__body: Esta clase se utiliza para crear el cuerpo de la tarjeta.
Sintaxis:
<div class="c-card">
<div class="c-card__body">
...
</div>
</div>
Ejemplo 1: el siguiente ejemplo muestra la tarjeta básica de Blaze UI.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Basics Card </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 Basics Card </h3> <div class="c-card"> <div class="c-card__body"> <p> A Computer Science portal for geeks. </p> </div> </div> </div> </body> </html>
Producción:
Tarjeta de aspectos básicos de la interfaz de usuario de Blaze
Ejemplo 2: el siguiente ejemplo muestra la tarjeta de aspectos básicos de la interfaz de usuario de Blaze con una imagen .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Basics Card </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 Basics Card </h3> <div class="c-card"> <div class="c-card__body"> <h4> GeeksforGeeks Image </h4> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" > </div> </div> </div> </body> </html>
Producción:
Tarjeta de aspectos básicos de la interfaz de usuario de Blaze
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