Las tarjetas son los bloques de construcción del diseño web moderno. Nielsen Norman Group las define como contenedores que agrupan información relacionada en unidades escaneables y flexibles. Diseñamos sistemas de tarjetas que ayudan a los usuarios a navegar, comparar y decidir — ya sea que esté mostrando 6 servicios o 6.000 productos.
VARIANTES DE PATRÓN
Muestre las ofertas de su empresa en una cuadrícula fácil de escanear. Cada tarjeta incluye un icono, título, descripción breve y CTA.
El elemento fundamental del comercio electrónico. Imagen, título, precio, calificación y CTA de añadir al carrito. Diseñadas para escaneo rápido.
Presente a su equipo con foto, nombre, cargo y biografía opcional o enlaces de redes sociales.
Muestre trabajos con una imagen dominante, título del proyecto, nombre del cliente y etiqueta de categoría. La imagen hace la mayor parte de la venta.
Compare planes uno al lado del otro. Cada tarjeta incluye nombre del plan, precio, lista de características y CTA.
Muestre citas de clientes con avatar, nombre, cargo, empresa y el texto del testimonio.
Vista previa de entradas de blog con imagen destacada, título, extracto, autor, fecha y etiqueta de categoría.
Cuadrícula de tarjetas asimétrica donde las tarjetas tienen diferentes tamaños — algunas ocupan 2 columnas, algunas son altas, algunas son anchas.
ANIMACIONES Y EFECTOS
Las tarjetas aparecen una por una con un ligero retraso entre cada una, creando un efecto de cascada mientras el usuario hace scroll.
Cuándo usar: Cualquier cuadrícula de tarjetas donde el contenido se carga mientras el usuario hace scroll. Crea ritmo y atrae la atención.
La tarjeta se eleva (translateY -4px a -8px) y la sombra se profundiza en hover, simulando profundidad física.
Cuándo usar: Cualquier tarjeta clicable. La interacción de tarjeta más común y esperada.
La imagen de la tarjeta se escala ligeramente (1.05-1.1x) en hover mientras el contenedor recorta el desbordamiento.
Cuándo usar: Tarjetas de portfolio, tarjetas de productos, tarjetas de blog — en cualquier lugar donde la imagen sea el elemento visual principal.
Una superposición semitransparente se desliza en hover, revelando información adicional oculta en el estado predeterminado.
Cuándo usar: Cuadrículas de portfolio donde desea una cuadrícula visual limpia pero necesita mostrar detalles en la interacción.
Layout estilo Pinterest donde tarjetas de diferentes alturas encajan sin espacios. Se cargan nuevas tarjetas dinámicamente.
Cuándo usar: Galerías de imágenes, archivos de blogs, feeds de contenido generado por usuarios con alturas naturalmente diferentes.
La tarjeta rota 180 grados en hover para revelar una cara posterior con contenido diferente.
Cuándo usar: Tarjetas de equipo (frente: foto, dorso: biografía), tarjetas de precios (frente: características, dorso: comparación). Use con moderación.
MEJORES PRÁCTICAS
EJEMPLOS GALARDONADOS
Tarjetas de características sobre fondo oscuro con bordes de gradiente sutil. Minimalista, denso en información y técnicamente preciso. Cada tarjeta comunica una característica.
Layout Bento grid con tarjetas de diferentes tamaños. Efectos glassmórficos y animaciones sutiles hacen que los datos financieros densos se sientan accesibles.
Tarjetas de productos perfeccionadas. Carrusel de imágenes por tarjeta, overlay de precio, calificación e icono de corazón. Muestra exactamente suficiente información para decidir si hacer clic.
Cuadrícula de tarjetas limpia con alturas consistentes, categorías claras y miniaturas de vista previa. El hover revela un CTA "Usar plantilla". Escala perfectamente.
NUESTRO PROCESO
Inventaríe todos los elementos que aparecerán como tarjetas. Defina el modelo de datos: qué campos existen y sus restricciones de longitud de contenido.
Defina el recuento de columnas por breakpoint (4 desktop, 2 tablet, 1 móvil). Establezca espaciado de gaps, padding y border-radius.
Diseñe la tarjeta en Figma como un componente reutilizable con variantes: predeterminado, hover, activo, carga, estado vacío.
Defina efectos de hover, revelados activados por scroll y timing de transiciones. Mantenga el tiempo total de animación por debajo de 500ms.
Construya con CSS Grid o Flexbox. Arquitectura basada en componentes. GSAP para animaciones de scroll, CSS para efectos de hover.
Pruebe con datos reales, casos extremos, cross-browser, interacción táctil en móvil y auditoría de accesibilidad.
PATRONES RELACIONADOS
La sección que introduce su contenido antes de la cuadrícula de tarjetas.
Saber más →Un patrón de tarjeta especializado para comparar niveles de servicio.
Saber más →Tarjetas de testimonios y cuadrículas de logotipos que generan confianza.
Saber más →Tarjetas de artículos y layouts de descubrimiento de contenido.
Saber más →PREGUNTAS FRECUENTES
Las tarjetas funcionan mejor para navegar colecciones diversas (productos, servicios, portfolio). Las listas funcionan mejor para contenido clasificado o secuencial. Las tablas funcionan mejor para comparaciones con muchos datos. El layout debe coincidir con la intención del usuario.
3-4 en desktop (1280px+), 2 en tablet (768px), 1 en móvil (375px). Más de 4 por fila hace que las tarjetas individuales sean demasiado pequeñas para escanear.
Sí, siempre. Las proporciones mixtas crean alturas de tarjeta desiguales que rompen la cuadrícula. Use object-fit: cover para recortar imágenes de manera consistente.
Defina una altura de tarjeta fija por fila. Trunque texto largo con CSS line-clamp. Diseñe para el peor caso y asegúrese de que el contenido más corto aún se vea equilibrado.
Auditaremos su layout actual, identificaremos oportunidades para diseño basado en tarjetas y propondremos un sistema que escale.