Cards

Sistema completo de tarjetas modernas con efectos glass, gradientes, variantes especializadas y layouts avanzados para crear interfaces contemporáneas y atractivas.

Cards Básicas Mejoradas

Las cards básicas incluyen mejoras visuales significativas, efectos hover suaves, sombras modernas y mejor spacing.

Card Básica

Mejorada con sombras suaves, transiciones fluidas y mejor tipografía. El hover effect eleva la card con una animación elegante.

Ver más
Demo image
Con Imagen

Card con imagen que incluye efecto de zoom suave en hover y bordes redondeados modernos.

Hace 3 mins Leer más
Header Mejorado
Subtítulo elegante

Card con header y footer mejorados, utilizando colores sutiles y mejor spacing para una apariencia más profesional.

Última actualización hace 3 mins 
<!-- Card básica mejorada -->
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Título de la Card</h5>
    <p class="card-text">Contenido con mejoras automáticas de spacing y tipografía.</p>
    <a href="#" class="btn btn-primary">Acción</a>
  </div>
</div>

<!-- Card con imagen -->
<div class="card">
  <img src="imagen.jpg" class="card-img-top" alt="Descripción">
  <div class="card-body">
    <h5 class="card-title">Título</h5>
    <p class="card-text">Contenido de la card</p>
  </div>
</div>

Mejoras Automáticas

🎨 Visuales

  • Sombras: Box-shadow más suave y moderna
  • Bordes: Border-radius XL (1rem)
  • Hover: Elevación de -4px con sombra intensa
  • Transiciones: 0.3s ease en todas las propiedades
  • Overflow: Hidden para contenido limpio

📝 Tipografía

  • Títulos: Font display con peso bold
  • Texto: Color gris 600 con line-height 1.6
  • Headers: Font weight semibold
  • Spacing: Padding optimizado (1.5rem)

Tamaños de Cards

Card Small

Padding reducido para espacios compactos.

Clase: .card-sm
Card Standard

Padding por defecto optimizado para la mayoría de casos de uso.

Padding: 1.5rem
Card Large

Padding amplio para contenido destacado y mayor importancia visual.

Clase: .card-lg 
<!-- Tamaños disponibles -->
<div class="card card-sm">...</div>  <!-- Padding: 1rem -->
<div class="card">...</div>         <!-- Padding: 1.5rem (default) -->
<div class="card card-lg">...</div> <!-- Padding: 2rem -->
<div class="card card-xl">...</div> <!-- Padding: 2.5rem -->

Variantes Modernas

Cards Glass (Glassmorphism)

Glass Light

Efecto cristal con backdrop-filter blur para un look moderno y elegante sobre cualquier fondo.

Ver más
Glass Dark

Variante oscura del efecto glass, perfecta para overlays sobre imágenes o fondos claros.

Explorar 
<!-- Glass effect -->
<div class="card card-glass">
  <div class="card-body">
    <h5 class="card-title">Glass Card</h5>
    <p class="card-text">Contenido con efecto cristal</p>
  </div>
</div>

<!-- Glass dark variant -->
<div class="card card-glass card-glass-dark">
  <!-- Automáticamente aplica colores para tema oscuro -->
</div>

Cards Gradient

Primary Gradient

Gradiente principal con colores de la marca. Los textos se adaptan automáticamente a blanco.

Acción
Success Gradient

Variante de éxito, perfecta para confirmaciones y estados positivos.

Continuar
Warning Gradient

Gradiente de advertencia para destacar información importante.

Atención 
<!-- Gradientes disponibles -->
<div class="card card-gradient">...</div>           <!-- Primary -->
<div class="card card-gradient-secondary">...</div> <!-- Secondary -->
<div class="card card-gradient-success">...</div>   <!-- Success -->

Cards con Efecto Glow

Glow Primary

Card con efecto de brillo que se intensifica en hover. Perfecta para destacar elementos importantes.

Estado activo
Glow Success

Variante con brillo verde, ideal para estados de éxito y confirmaciones.

Completado 
<!-- Efecto glow -->
<div class="card card-glow">
  <!-- Brillo en color primary -->
</div>

<div class="card card-glow card-glow-success">
  <!-- Brillo en color success -->
</div>

Cards con Bordes Coloreados

Border Primary

Card con borde coloreado para destacar categorías o estados específicos.

Importante
Border Success

Perfecta para mostrar estados positivos o información de éxito.

Completado
Border Warning

Ideal para advertencias o información que requiere atención.

Pendiente 
<div class="card card-bordered">...</div>         <!-- Primary border -->
<div class="card card-bordered-success">...</div>  <!-- Success border -->
<div class="card card-bordered-warning">...</div>  <!-- Warning border -->
<div class="card card-bordered-danger">...</div>   <!-- Danger border -->

Card Flat (Sin Hover)

Card Flat

Card sin efecto hover para elementos estáticos o cuando no se requiere interactividad visual.

💡 Útil para cards informativas o de solo lectura 
<div class="card card-flat">
  <!-- Sin efecto hover, mantiene sombra estática -->
</div>

Cards Especiales

Card Testimonial

Este sistema de cards es increíblemente versátil y fácil de usar. Ha transformado completamente la apariencia de nuestra aplicación.
MG
María García
UI/UX Designer
La documentación es excelente y los componentes funcionan perfectamente out-of-the-box. Altamente recomendado.
JL
Juan López
Frontend Developer
<div class="card card-testimonial">
  <div class="testimonial-quote">
    El texto del testimonio aparece aquí con comillas decorativas automáticas.
  </div>
  <div class="testimonial-author">
    <img src="avatar.jpg" alt="Avatar" class="author-avatar">
    <div class="author-info">
      <div class="author-name">Nombre del Cliente</div>
      <div class="author-role">Cargo / Empresa</div>
    </div>
  </div>
</div>

Card de Producto

Producto
-25%
Auriculares Premium
$79.99 $99.99

Calidad de sonido excepcional con cancelación de ruido activa.

Producto
Nuevo
Smart Watch
$299.99

Tecnología avanzada para monitoreo de salud y fitness.

<div class="card card-product">
  <div class="product-image">
    <img src="producto.jpg" alt="Producto">
    <span class="product-badge badge-sale">-25%</span>
    <div class="product-overlay">
      <button class="btn btn-light">Ver detalles</button>
    </div>
  </div>
  <div class="product-info">
    <h5 class="product-title">Nombre del Producto</h5>
    <div class="product-price">
      <span class="current-price">$99.99</span>
      <span class="old-price">$129.99</span>
    </div>
    <button class="btn btn-primary">Comprar</button>
  </div>
</div>

Card de Estadísticas

📊
2,847
Usuarios Activos
↗ +12% este mes
💰
$45.2K
Ingresos
↗ +8.2% este mes
⚡
98.5%
Uptime
↘ -0.1% este mes 
<div class="card card-stats">
  <div class="stats-icon stats-icon-primary">
    <i class="icon-chart"></i>
  </div>
  <div class="stats-number">2,847</div>
  <div class="stats-label">Usuarios Activos</div>
  <div class="stats-change positive">+12%</div>
</div>

Card de Perfil

AS
Ana Silva
Product Designer

Especialista en diseño de experiencia de usuario con más de 5 años de experiencia en productos digitales.

MC
Miguel Chen
Full Stack Developer

Desarrollador apasionado por crear aplicaciones web escalables y experiencias de usuario excepcionales. 

<div class="card card-profile">
  <img src="avatar.jpg" alt="Avatar" class="profile-avatar">
  <h5 class="profile-name">Nombre Completo</h5>
  <div class="profile-role">Cargo / Posición</div>
  <p class="profile-bio">Breve descripción o biografía</p>
  <div class="profile-social">
    <a href="#" class="social-link">📱</a>
    <a href="#" class="social-link">💼</a>
    <a href="#" class="social-link">🌐</a>
  </div>
</div>

Card de Blog

Blog post
Tecnología
📅 15 Mar 2024
⏱️ 5 min lectura
💬 12 comentarios
Las Tendencias de Diseño Web que Dominarán 2024

Descubre las últimas tendencias en diseño web, desde el glassmorphism hasta las animaciones micro-interactivas que están revolucionando la experiencia de usuario.

DG
David Goma
Leer más → 
<div class="card card-blog">
  <div class="blog-image">
    <img src="article.jpg" alt="Artículo">
    <span class="blog-category">Tecnología</span>
  </div>
  <div class="blog-content">
    <div class="blog-meta">
      <span class="meta-item">📅 15 Mar 2024</span>
      <span class="meta-item">⏱️ 5 min lectura</span>
    </div>
    <h5 class="blog-title">
      <a href="#">Título del Artículo</a>
    </h5>
    <p class="blog-excerpt">Resumen del contenido...</p>
    <div class="blog-footer">
      <div class="author-info">
        <img src="avatar.jpg" class="author-avatar">
        <span class="author-name">Autor</span>
      </div>
      <a href="#" class="read-more">Leer más</a>
    </div>
  </div>
</div>

Layouts y Disposiciones

Card Horizontal

Imagen horizontal
Layout Horizontal

Perfecto para mostrar contenido con imágenes en formato landscape. Se adapta automáticamente a móvil cambiando a layout vertical.

<div class="card card-horizontal">
  <img src="imagen.jpg" class="card-img-left" alt="Imagen">
  <div class="card-body">
    <h5 class="card-title">Título</h5>
    <p class="card-text">Contenido de la card horizontal</p>
  </div>
</div>

Card con Overlay

Fondo
Título sobre imagen

Contenido superpuesto sobre la imagen de fondo con gradiente para mejor legibilidad.

<div class="card card-overlay">
  <img src="fondo.jpg" class="card-img" alt="Fondo">
  <div class="card-img-overlay">
    <h5 class="card-title">Título</h5>
    <p class="card-text">Contenido superpuesto</p>
  </div>
</div>

Grid Masonry

Card Pequeña

Contenido breve para demostrar el layout masonry.

Card Media

Esta card tiene más contenido para mostrar cómo el masonry layout se adapta automáticamente a diferentes alturas de contenido.

Información adicional
Card Grande

Esta es una card con mucho más contenido para demostrar cómo el sistema masonry distribuye automáticamente las cards en columnas balanceadas.

  • Punto 1
  • Punto 2
  • Punto 3
Card Compacta

Otra card pequeña.

Card Extendida

Esta card demuestra cómo el contenido variable funciona perfectamente con el layout masonry, creando una disposición natural y orgánica.

Tag 1 Tag 2 
<div class="cards-masonry">
  <div class="card">
    <!-- Card 1 -->
  </div>
  <div class="card">
    <!-- Card 2 -->
  </div>
  <!-- Más cards... -->
</div>

📱 Responsive Masonry

  • Móvil: 1 columna
  • Tablet: 2 columnas
  • Desktop: 3 columnas
  • Auto-balanceado: Las cards se distribuyen automáticamente

Card Groups y Decks

Card Group (Alturas iguales)
Card 1

Contenido corto.

Card 2

Esta card tiene más contenido para demostrar cómo todas las cards del grupo mantienen la misma altura automáticamente.

Card 3

Contenido medio para completar el ejemplo.

Card Deck (Espaciado independiente)
Deck 1

Alturas independientes con espaciado.

Deck 2

Cada card mantiene su altura natural según el contenido que contenga.

Información adicional
Deck 3

Perfecto para contenido variable.

<!-- Card Group (alturas iguales) -->
<div class="card-group">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

<!-- Card Deck (alturas independientes) -->
<div class="card-deck">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

Funcionalidades Avanzadas

Estados de Loading

Cargando contenido...
Por favor espera 
<!-- Estado skeleton -->
<div class="card card-loading">
  <div class="card-body">
    <!-- Se aplican automáticamente los skeletons -->
  </div>
</div>

<!-- Estado spinner personalizado -->
<div class="card">
  <div class="card-body text-center">
    <div class="spinner-border text-primary"></div>
    <p>Cargando...</p>
  </div>
</div>

Card Disabled

Card Deshabilitada

Esta card está deshabilitada y no responde a interacciones hover.

Card Normal

Card completamente funcional para comparación.

<div class="card card-disabled">
  <div class="card-body">
    <h5 class="card-title">Card Deshabilitada</h5>
    <p class="card-text">Sin efectos hover ni interacciones</p>
  </div>
</div>

Animaciones de Entrada

🎬 Animaciones Escalonadas

Las cards pueden aparecer con animaciones staggered (escalonadas) para crear efectos visuales atractivos:

Delay: 0.1s

Primera en aparecer

Clase: .delay-1
Delay: 0.2s

Segunda en aparecer

Clase: .delay-2
Delay: 0.3s

Tercera en aparecer

Clase: .delay-3 
<div class="card card-animate-in delay-1">...</div>
<div class="card card-animate-in delay-2">...</div>
<div class="card card-animate-in delay-3">...</div>
<div class="card card-animate-in delay-4">...</div>
<div class="card card-animate-in delay-5">...</div>

Dark Mode Automático

🌙 Adaptación Automática

Dark Mode

Las cards se adaptan automáticamente al modo oscuro usando CSS media queries.

Header Oscuro
Subtítulo adaptado

Todos los elementos se adaptan automáticamente.

Footer en modo oscuro

Se activa automáticamente con @media (prefers-color-scheme: dark)

  • Fondo: $gray-800
  • Texto: $gray-100
  • Bordes: $gray-700/$gray-600

Cards Interactivas

🔔
Notificación

Card con efecto pulse para llamar la atención.

👆
Click Me

Card interactiva con efecto click.

Haz click para ver el efecto
⭐
Favorito

Card con estados de favorito.

// Ejemplo de interactividad con JavaScript
document.querySelectorAll('.card-interactive').forEach(card => {
  card.addEventListener('click', function() {
    this.classList.toggle('card-selected');
  });
});

// Animaciones personalizadas
function animateCardEntry() {
  const cards = document.querySelectorAll('.card-animate-in');
  cards.forEach((card, index) => {
    setTimeout(() => {
      card.style.opacity = '1';
      card.style.transform = 'translateY(0)';
    }, index * 100);
  });
}

Ejemplos Completos

🛒 E-commerce Dashboard

📊
Ventas
$12.5K
+8.2%
👥
Clientes
1.2K
+12%
Productos Top
Auriculares Pro
245 ventas
Smart Watch
189 ventas
Tablet Ultra
156 ventas

📱 Social Media Feed

LC
Laura Chen
Hace 2 horas

¡Increíble lo fácil que es crear interfaces modernas con este sistema de cards! 🚀

Post
RM
Roberto Martín
Hace 4 horas

Trabajando en el nuevo diseño del dashboard. ¿Qué opinan de estas cards? 🎨

💎 Plan Premium

$29

por mes

  • ✅ Todas las funciones
  • ✅ Soporte prioritario
  • ✅ Sin límites
  • ✅ API access
14 días gratis
Curso
Nuevo
⭐ ⭐ ⭐ ⭐ ⭐
(4.9)
Desarrollo Web Moderno

Aprende a crear aplicaciones web modernas con las últimas tecnologías.

JM
Juan Martínez
12h 30min
$49.99
Tarea: Revisar diseño
Proyecto Mobile App
En progreso

Revisar y aprobar los mockups del nuevo diseño de la aplicación móvil antes de enviar a desarrollo.

Progreso 75%
📅 Vence: 25 Mar
👥
AM
LC

🎯 Mejores Prácticas para Cards

📝 Contenido
  • Títulos concisos: Máximo 2-3 líneas
  • Jerarquía visual: Usa tamaños de fuente apropiados
  • Espaciado consistente: Mantén el mismo padding
  • CTAs claros: Botones con acciones específicas
  • Información esencial: Solo lo más importante
🎨 Diseño
  • Consistencia: Mismo estilo en toda la aplicación
  • Contraste: Texto legible en todos los fondos
  • Imágenes optimizadas: Aspect ratio consistente
  • Estados claros: Hover, active, disabled
  • Responsive: Funciona en todos los tamaños

🔧 Personalización Avanzada

Variables SCSS disponibles:
  • $border-radius-xl - Border radius
  • $box-shadow-md - Sombra por defecto
  • $box-shadow-xl - Sombra hover
  • $font-family-display - Font títulos
  • $transition-all - Transiciones
Clases modificadoras:
  • .card-sm - Padding reducido
  • .card-lg - Padding amplio
  • .card-xl - Padding extra amplio
  • .card-flat - Sin hover
  • .card-loading - Estado cargando
  • .card-disabled - Estado deshabilitado
Variantes especiales:
  • .card-glass - Efecto cristal
  • .card-gradient - Fondo degradado
  • .card-glow - Efecto brillo
  • .card-bordered - Borde coloreado
  • .card-horizontal - Layout horizontal
  • .card-overlay - Contenido superpuesto

⚡ Optimización de Performance

CSS:
  • Usa transform para animaciones
  • Evita cambios de layout en hover
  • Optimiza backdrop-filter para glass
  • Usa will-change para animaciones complejas
JavaScript:
  • Lazy loading para imágenes
  • Virtual scrolling para listas grandes
  • Debounce en interacciones frecuentes
  • Intersection Observer para animaciones
En esta página