Divisores de tarjetas Blaze UI

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 muestra el contenido del sitio de manera similar a un naipe que usa las clases BlazeUI. Los divisores de tarjetas Blaze UI se utilizan para crear el separador entre los elementos de la tarjeta.

Clase de divisores de tarjetas Blaze UI:

c-card__item–divider: esta clase se utiliza para crear el divisor entre los elementos de la tarjeta.

Sintaxis:

<div class="c-card">
      <div class="c-card__item  ">
         ...
      </div>
      <div role="separator" 
             class="c-card__item c-card__item--divider">
           ...
      </div>
      <div class="c-card__item  ">
         ...
      </div>
</div>

Ejemplo 1: el siguiente ejemplo demuestra los divisores de tarjetas de interfaz de usuario de Blaze.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title> Blaze UI Cards Dividers </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 Dividers </h3>
  
        <div class="c-card">
            <div class="c-card__item">
                A Computer Science portal for geeks. 
            </div>
  
            <div role="separator" class=
                "c-card__item c-card__item--divider">
                This is divider
            </div>
  
            <div class="c-card__item">
                It contains well written, well thought
                and well explained computer science and
                programming articles.
            </div>
        </div>
    </div>
</body>
</html>

Producción:

Ejemplo 2: El siguiente ejemplo demuestra los divisores de tarjetas de interfaz de usuario de Blaze usando imágenes.

HTML

<!DOCTYPE html>
<html lang="en">
  
<head>
    <title> Blaze UI Cards Dividers </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 Dividers </h3>
  
        <div class="c-card">
            <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__item c-card__item--divider">
                This is divider
            </div>
  
            <div class="c-card__item">
                It contains well written, well thought
                and well explained computer science and
                programming articles.
            </div>
  
            <div role="separator" class=
                "c-card__item c-card__item--divider">
                This is divider
            </div>
  
            <div class="c-card__item">
                <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/gfg_200x200-min.png" >
            </div>
        </div>
    </div>
</body>
</html>

Producción:

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

HTML

HTML

Deja una respuesta Cancelar la respuesta