Cards & layout

Cards & patrones de layout

Tarjetas listas para producto digital: cards con imagen, texto, stats, listados y bloques de contenido, junto con patrones de disposición en 2–3 columnas para webs, dashboards y portfolios.

Cómo usarlo

Un sistema de cards, no pantallas sueltas

Esta sección reúne patrones de card reutilizables para productos digitales. Cambia el contenido, pero se mantiene el sistema: jerarquía, márgenes, alineación y comportamiento responsive.

• Define unas pocas cards base (con imagen, sin imagen, stats, listado) y reutilízalas en todo el proyecto.

• Combina estas cards en layouts en 2–3 columnas para crear vistas consistentes: home, listados, módulos de producto o secciones de recursos.

• Mantén constantes los espacios, tipografía y estados hover para que el sistema sea estable, aunque el estilo visual cambie.

• Cada tarjeta se puede mapear fácilmente a componentes en tu design system o en la librería de tu herramienta de diseño.

Puedes usar estos patrones como base para tu documentación de UI o como referencia rápida al diseñar nuevas pantallas sin partir de cero.

Tipos de tarjetas

Cards base para productos digitales

Ejemplos de tarjetas que puedes integrar tal cual o adaptar a tu marca: contenido con imagen, solo texto, indicadores, listados y bloques de contenido editorial.

Card con imagen

Tarjeta para recursos, artículos, módulos de producto o proyectos destacados. Imagen arriba, contenido abajo y CTA claro.

UI kit

Glassmorphism dashboard cards

Set de tarjetas para paneles con fondos glass, preparado para combinar con tus paletas de KIT UX UI en entornos web o mobile.

📁 12 componentes ⏱ Integración rápida
AA contrast ready

Card sin imagen

Tarjeta centrada en el texto. Ideal para módulos, descripciones cortas, términos de servicio, anuncios de producto o mensajes clave.

Patrón de interfaz

Card de contenido limpio

Úsala para agrupar ideas, features o mensajes breves. El foco está en la legibilidad y la jerarquía tipográfica, no en el visual.

Producto Contenido

Card de stats

Tarjeta para métricas clave: una cifra principal, contexto y un pequeño grid con indicadores secundarios.

Engagement con recursos UI

78,4%

▲ +12,3% vs. periodo anterior

Ideal para paneles de analítica, informes internos o dashboards ejecutivos.

Descargas

432

Proyectos

29

Satisfacción

4,6/5

Card de listado

Tarjeta que agrupa varios ítems: roadmap, tareas, features o entradas de un changelog.

Cards básicas de UI

Cards con y sin imagen para construir secciones de contenido y listados.

Status: disponible

Cards de datos

Patrones de stats, KPIs y métricas con jerarquía clara y soporte para AA.

Status: en evolución

Cards de layout

Grids en 2–3 columnas para unificar la experiencia entre páginas.

Status: recomendado

Bloque de contenido

Card más grande para contenido editorial, mensajes clave o descripciones de secciones.

Guideline de diseño

Construir vistas a partir de cards

En lugar de diseñar cada pantalla desde cero, parte de un pequeño sistema de tarjetas. El mismo patrón funciona para listados de recursos, portfolios, features o módulos de producto.

Card para microcopy

Tarjeta pequeña para tips, mensajes contextuales o avisos dentro de una interfaz.

Tip de contenido

Evita el lorem ipsum eterno

Usa contenido realista desde el principio. El tamaño del texto cambia el layout y las decisiones de diseño.

Patrones de layout

Grids en 2–3 columnas y mosaicos

Ejemplos de cómo disponer las cards en pantalla: layouts a dos columnas, tres columnas y un mosaico asimétrico para páginas más editoriales.

Layout 2 columnas: recurso + listado

Una columna principal con contenido protagonista y una secundaria para listados o enlaces relacionados. Funciona bien en páginas de detalle, landings y secciones de recursos.

Columna principal

Card grande con imagen o bloque de contenido. Puedes usar aquí la card con imagen o el bloque editorial.

Ideal para destacar un recurso, un producto o una historia de cliente.

Columna secundaria

Cards de lista o pequeños módulos con enlaces: contenidos relacionados, siguientes pasos, documentación.

En mobile, se apila debajo de la columna principal.

Layout 3 columnas: grid de cards

Grid clásico para catálogos de recursos, entradas de blog, proyectos o features. Misma card repetida con contenido distinto.

Card 01 · Recursos UI

Cards con imagen para mostrar kits y patrones visuales.

Card 02 · Diseño

Cards de contenido para guidelines, principios y documentación.

Card 03 · Datos

Cards de stats para métricas clave de producto.

Layout mosaico: destacado + dos secundarios

Un layout asimétrico para páginas más editoriales: un módulo protagonista y dos secundarios. Funciona muy bien para hero sections, “últimas novedades” o bloques curados.

Módulo destacado

Card más grande con texto algo más extenso, CTA principal o información prioritaria.

Ocupa más espacio para marcar jerarquía visual.

Módulo secundario 1

Card corta con resumen de un recurso o actualización.

Módulo secundario 2

Card para un enlace a documentación, un caso de uso o un anuncio breve.

Tendencias & comportamiento

Un mismo patrón de card puede leerse muy distinto según la tendencia visual y la animación al pasar el ratón. Aquí tienes ejemplos listos para adaptar.

Grid de cards · Estilos suaves

Tres variantes pensadas para producto digital sobrio: glassmorphism controlado, clean minimal y un patrón con énfasis en el estado hover tipo “focus”.

Glassmorphism card

glass

Fondo ligeramente translúcido y hover con más profundidad y brillo.

Clean minimalist card

clean

Elevación suave al hover, sin estridencias. Funciona bien en sitios corporativos.

Outline focus card

focus

En hover, se refuerza el borde y se simula un estado de foco destacado.

Recomendación: usa estos patrones para secciones con contenido crítico donde la lectura y la accesibilidad pesan más que el impacto visual.

Grid de cards · Estilos intensos

Variaciones más expresivas para proyectos con personalidad fuerte: neobrutalismo, efectos de blur y estética techno / data-heavy.

Neobrutalist card

neo

Colores planos, bordes duros y hover con desplazamiento y sombra marcada.

Cinematic blur card

blur

Fondo con degradado suave y hover con más contraste y profundidad.

Dark techno card

tech

Ideal para dashboards oscuros: hover más agresivo y lectura clara sobre fondo profundo.

Úsalos con moderación en vistas clave: portfolios, proyectos creativos o secciones donde la identidad visual tenga un peso especial.