• Cards

    Bootstrap 5 Card component

    Tarjetas responsivas creadas con la última versión de Bootstrap 5. Card es un contenedor de contenido responsivo con una opción extensible para encabezados, pies de página, imágenes y una amplia variedad de contenido.

    Ejemplo Basico

    Utilice el siguiente componente de tarjeta simple con un título y una descripción:

    Card title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

    Editar en Liveweave 
                                                           <!-- Ejemplo 1 -->
  <div class="card"> 
    <div class="card-body">
      <h5 class="card-title">Card Title</h5> 
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> 
      <button type="button" class="btn btn-primary">Button</button> 
    </div> 
  </card>

    Header and Footer

    Agregue secciones de encabezado y pie de página opcionales a la tarjeta.

    Featured
    Special title

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    Button
    2 days ago
    Editar en Liveweave 
                                                           <!-- Ejemplo 1 -->
  <div class="card text-center">
    <div class="card-header">Featured</div>
    <div class="card-body">
      <h5 class="card-title">Special title</h5>
      <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <a href="#" class="btn btn-primary">Button</a>
    </div>
    <div class="card-footer text-muted">2 days Dic</div>
  </div>
    Nota: Algunos ejemplos aquí tienen un ancho de tarjeta fijo o fixed card width. Las tarjetas no tienen un ancho fijo para comenzar, por lo que naturalmente llenarán todo el ancho de su elemento principal.

    Card Personalizado

    Tarjeta Empresa.

    Contacta
    Contacta

    CEO / Co-Fundador / Cliente

    Editar en Liveweave 
                                                           <!-- Ejemplo 1 -->
  <div class="card card-body">
    <div class="row justify-content-center align-items-center">
      <div class="col-sm-auto col-4">
        <div class="avatar avatar-xl position-relative">
          <div src="../../contacta@1.0/dist/img/favicon.png" alt="Contacta" class="w-100 rounded-circle shadow-sm"/>
        </div>
      </div>
      <div class="col-sm-auto col-8 my-auto">
        <div class="h-100">
          <h5 class="mb-1 font-weight-bolder">Contacta</h5>
          <p class="mb-0 font-weight-normal text-sm">CEO / Co-Fundador / Cliente</p>
        </div>
      </div>
      <div class="col-sm-auto ms-sm-auto mt-sm-0 mt-3 d-flex">
        <label class="form-check-label mb-0">
          <small id="#">
            Mantener Actividad
          </small>
        </label>
        <div class="form-check form-switch ms-2 my-auto">
          <input class="form-check-input" type="checkbox" checked="">
        </div>
      </div>
    </div>
  </div>

    Tarjeta de 2Factor.

    2FA (2 Factor de Autenticación)
    Activo

    Correo Electronico

    admin@contacta.mx

    SMS

    +52 81 0000 0000

    Autenticador

    No Configurado

    Editar en Liveweave 
                                           <!-- Ejemplo 1 -->
<h5 class="mb-1 font-weight-bolder">Contacta</h5>

    Tarjeta de Sesiones.

    Sesiones

    Esta es una lista de dispositivos que han iniciado sesión en su cuenta. Elimina aquellos que no reconozcas.

    IP Public 12.13.173.112

    Sesión actual

    Activo

    MX

    Ver mas

    Chrome en macOS

    MX

    Ver más

    Safari en iPhone

    MX

    Ver más

    Chrome en Android

    MX

    Ver más
    Editar en Liveweave 
                                           <!-- Ejemplo 1 -->
<h5 class="mb-1 font-weight-bolder">Contacta</h5>

    Tarjeta de Notificaciones.

    Notificaciones

    Elije las notificaciones del sistema.

    Actividad

    Correo Electronico

    Push

    SMS
    API Muestra alerta de la api
    Sistema Alertas del sistema.
    Login Registro de inicio de sesion.

    Iniciar sesión desde un nuevo dispositivo
    Editar en Liveweave 
                                           <!-- Ejemplo 1 -->
<h5 class="mb-1 font-weight-bolder">Contacta</h5>

    Tarjeta de Enlaces.

    Editar en Liveweave 
                                           <!-- Ejemplo 1 -->
<h5 class="mb-1 font-weight-bolder">Contacta</h5>

    Tarjeta de Eliminar.

    Eliminar Cuenta

    Una vez que eliminas tu cuenta, no hay vuelta atrás. Por favor esté seguro.

    Editar en Liveweave 
                                           <!-- Ejemplo 1 -->
<h5 class="mb-1 font-weight-bolder">Contacta</h5>

    Tarjeta de Contraseñas.

    Crea una contraseña segura

    Puedes crear una contraseña segura para tu acceso de modo segura.

    • 1 carácter en minúscula
    • 1 carácter en mayúscula
    • 1 número
    • 1 caracter especial
    • 9 caracteres mínimo
    Editar en Liveweave 
                                           <!-- Ejemplo 1 -->
<h5 class="mb-1 font-weight-bolder">Contacta</h5>

    contacta

    CONTACTA UI/UX