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 Images se usa para agregar las imágenes en la tarjeta usando la clase o-image . En este artículo, analizaremos las imágenes de las tarjetas Blaze UI Cards.
Clase de imágenes de tarjetas Blaze UI:
- o-image: Esta clase se utiliza para agregar la imagen a la tarjeta.
Sintaxis:
<div class="c-card">
<img class="o-image" src="...">
....
</div>
Ejemplo 1: el siguiente ejemplo muestra las imágenes de las tarjetas de interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Cards Images </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 Images </h3> <div class="c-card"> <img class="o-image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220427162344/gfgimage.jpg" > <header class="c-card__header"> <h2 class="c-heading"> GeeksforGeeks Image </h2> </header> </div> </div> </body> </html>
Producción:
Imágenes de tarjetas de interfaz de usuario de Blaze
Ejemplo 2: El siguiente ejemplo muestra las imágenes de tarjetas de interfaz de usuario de Blaze.
HTML
<!DOCTYPE html> <html lang="en"> <head> <title> Blaze UI Cards Images </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 Images </h3> <div class="c-card"> <img class="o-image" src= "https://media.geeksforgeeks.org/wp-content/uploads/20220427162638/gfgimg.jpg" > <header class="c-card__header"> <h2 class="c-heading"> GeeksforGeeks Image </h2> </header> <div class="c-card__body"> <p> A Computer Science portal for geeks. </p> </div> <footer class="c-card__footer c-card__footer--block"> <button class="c-button c-button--block c-button--info"> GFG Button </button> </footer> </div> </div> </body> </html>
Producción:
Imágenes de tarjetas de 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