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.
Blaze UI Cards Grouped Items se usa para agrupar elementos de tarjetas creando una línea horizontal. Para agrupar elementos, use la clase modificadora agrupada con tarjeta c para eliminar los bordes del elemento y use la clase divisora de tarjeta c para crear la línea horizontal.
Tarjetas Blaze UI Clases de elementos agrupados:
- c-card–grouped: esta clase se utiliza para eliminar el borde del elemento.
- c-card__divider: esta clase se utiliza para crear el divisor.
Sintaxis:
<div class="c-card c-card--grouped">
<div class="c-card__item">
...
</div>
<div role="separator"
class="c-card__divider">
</div>
...
</div>
Ejemplo 1: el siguiente ejemplo muestra los elementos agrupados de las tarjetas de interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Cards Grouped 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 Grouped Items </h3> <div class="c-card c-card--grouped"> <div class="c-card__item"> GeeksforGeeks 1 </div> <div class="c-card__item"> GeeksforGeeks 2 </div> <div role="separator" class="c-card__divider"> </div> <div class="c-card__item"> GeeksforGeeks 3 </div> <div role="separator" class="c-card__divider"> </div> <div class="c-card__item"> GeeksforGeeks 4 </div> <div class="c-card__item"> GeeksforGeeks 5 </div> </div> </div> </body> </html>
Producción:
Elementos agrupados de tarjetas Blaze UI
Ejemplo 2: el siguiente ejemplo muestra los elementos agrupados de las tarjetas de interfaz de usuario de Blaze con imágenes .
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Cards Grouped 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 Grouped Items </h3> <div class="c-card c-card--grouped"> <div class="c-card__item"> GeeksforGeeks 1 </div> <div class="c-card__item "> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"> </div> <div role="separator" class="c-card__divider"> </div> <div class="c-card__item"> <img src= "https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png" > </div> <div role="separator" class="c-card__divider"> </div> <div class="c-card__item"> GeeksforGeeks 4 </div> <div class="c-card__item"> GeeksforGeeks 5 </div> </div> </div> </body> </html>
Producción:
Elementos agrupados 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