Tarjetas en UI: cuándo usarlas, anatomía y jerarquía que se entiende a la primera

Hace poco revisábamos en el estudio el panel interno de una empresa de reformas. Todo estaba dentro de tarjetas: los avisos, los presupuestos, el calendario, el resumen del mes, incluso el formulario de búsqueda. Tarjetas con sombra, dentro de secciones con sombra, sobre un fondo gris. El equipo nos decía que la herramienta «cansaba», y tenían razón, aunque ninguna pantalla estaba mal dibujada por separado. Cuando todo es una caja, ninguna caja destaca.

Las tarjetas, o cards, son uno de los patrones más agradecidos del diseño de interfaces. Ordenan contenido heterogéneo, se adaptan bien a pantallas de cualquier ancho y invitan a explorar. Precisamente por eso se usan como solución por defecto, y ahí empiezan los problemas de jerarquía. En esta guía repasamos cuándo encajan de verdad, cómo se construyen por dentro, qué medidas suelen funcionar y cómo hacerlas clicables sin perder accesibilidad.

01Qué es una tarjeta y qué promesa le hace al usuario

Una tarjeta es un contenedor que agrupa la información esencial sobre un único objeto y que, casi siempre, actúa como acceso a su versión completa. Un artículo del blog, una vivienda en venta, un plato de la carta, un miembro del equipo, un proyecto del portfolio. El Nielsen Norman Group la define como un contenedor rectangular con imágenes y texto que sirve de punto de entrada a información más detallada, y esa definición recoge lo importante: resumen y puerta.

Esa doble función crea una promesa implícita. Cuando el usuario ve una rejilla de tarjetas, entiende tres cosas sin que nadie se lo explique: que cada caja es un elemento independiente, que todas son del mismo tipo y que puede comparar unas con otras escaneando. Si una tarjeta rompe esa promesa (porque mezcla dos objetos, porque su estructura es distinta a la de sus vecinas o porque no lleva a ningún sitio), la rejilla deja de leerse como un conjunto ordenado.

Por eso la primera pregunta al diseñar con tarjetas es siempre la misma: ¿qué objeto representa cada una? Si la respuesta es clara, vamos bien. Si cuesta contestar, probablemente lo que necesitamos es una sección, un panel o un bloque de texto, y no una card.

02Cuándo una tarjeta es la mejor opción (y cuándo brilla una lista o una tabla)

Las tarjetas funcionan mejor cuando los elementos son visuales, heterogéneos y se exploran más que se comparan. Las listas, cuando importa la secuencia o el escaneo vertical rápido. Las tablas, cuando hay que comparar muchos atributos con precisión. Elegir bien el formato resuelve más problemas que cualquier ajuste de sombra.

Hay una señal muy fiable: si al diseñar la tarjeta te ves obligado a poner seis o siete datos alineados en filas de «etiqueta: valor», lo que tienes delante es una tabla disfrazada. En la guía sobre diseño de tablas de datos profundizamos en ese otro formato. Y si la decisión depende de un solo vistazo a la foto (una casa con vistas al mar, un bolso, un plato), la tarjeta es tu aliada.

Tampoco conviene usarla para una sola pieza aislada. Una tarjeta solitaria en mitad de una página suele ser un bloque que se ha puesto un traje de card. Ahí funciona mejor trabajar la jerarquía con tipografía y espacio, que es lo que explicamos en jerarquía visual en diseño web.

03Anatomía de una tarjeta, de arriba abajo

Casi todas las tarjetas comparten las mismas piezas. No todas son obligatorias, pero conviene que aparezcan siempre en el mismo orden dentro de un producto, porque ese orden es lo que permite escanear sin pensar.

El contenedor

Es la caja: fondo, borde o sombra, radio de esquina y relleno interior. En nuestros proyectos solemos trabajar con un relleno de 16 px en móvil y de 20 a 24 px en escritorio, siempre dentro de un sistema de espaciado de 8 puntos para que todo encaje. El radio va en sintonía con el resto de la interfaz: entre 8 y 16 px es un rango habitual, y Material Design 3, por ejemplo, usa 12 dp en sus tarjetas. Lo que mejor funciona es que botones, campos y tarjetas compartan una lógica de radios, de forma que el contenedor, al ser el elemento más grande, tenga el radio mayor.

Para separarlo del fondo hay tres caminos: sombra (elevación), borde fino o un fondo de un tono ligeramente distinto. Material 3 los recoge como tarjetas elevated, outlined y filled. Elige uno como norma y reserva la elevación adicional para estados: hover, arrastre o selección.

Los medios

Imagen, vídeo, mapa o ilustración. Va normalmente arriba, a sangre, o a la izquierda en tarjetas horizontales. La regla de oro es fijar la proporción: 16:9 para contenido editorial y vídeo, 4:3 o 3:2 para fotografía de producto o inmuebles, 1:1 para retratos y catálogo. Con aspect-ratio y object-fit: cover todas las imágenes ocupan lo mismo aunque lleguen con tamaños distintos, y la rejilla mantiene su ritmo.

El encabezado

El título es el protagonista de la tarjeta y el ancla del enlace. Suele ir uno o dos pasos por encima del texto base en la escala tipográfica, con un peso semibold. Encima o debajo puede llevar un antetítulo o etiqueta corta (categoría, estado, «Nuevo»), siempre más pequeño y discreto que el título.

Los metadatos y el cuerpo

Precio, fecha, ubicación, duración, valoración. Aquí está el riesgo de saturar. Lo que funciona es elegir los dos o tres datos que de verdad ayudan a decidir entrar o no, y dejar el resto para la página de detalle. Si hay un extracto de texto, conviene recortarlo a dos o tres líneas con line-clamp para que todas las tarjetas tengan la misma altura visual.

Las acciones

Botones o iconos como «Guardar», «Comparar», «Añadir al carrito». Lo ideal es que haya como mucho una acción principal y una o dos secundarias, colocadas siempre en el mismo sitio, normalmente en la parte inferior. Si toda la tarjeta es clicable para ir al detalle, las acciones secundarias tienen que ser elementos independientes y claramente distinguibles, con su propia área táctil de al menos 24×24 px (WCAG 2.2) y mejor de 44×44.

04Jerarquía: una protagonista por tarjeta y un ritmo común en la rejilla

Los problemas de jerarquía con tarjetas aparecen en dos niveles: dentro de cada tarjeta y entre todas ellas. Los dos se resuelven con la misma idea: decidir qué manda y dejar que lo demás acompañe.

Dentro de la tarjeta

Lo que funciona es que haya un único elemento dominante, casi siempre la imagen o el título, y un segundo nivel claro, que suele ser el dato decisivo. En un catálogo de ropa, la foto manda y el precio acompaña. En un listado de cursos, el título manda y la fecha de inicio acompaña. En una tarjeta de equipo, la foto y el nombre van juntos y el cargo queda en segundo plano.

Tres ajustes que suelen poner orden en una tarjeta confusa:

1. 01Reducir los pesos tipográficos a dos: uno para el título y otro para todo lo demás.
2. 02Agrupar los metadatos en una sola línea con separadores discretos, en lugar de apilarlos con iconos.
3. 03Pasar las etiquetas de color a un tono más suave, para que no compitan con la acción principal.

Entre tarjetas

Una rejilla se lee bien cuando todas las tarjetas tienen la misma estructura, el mismo orden de piezas y la misma altura en cada fila. Si una lleva imagen y la siguiente no, o si los títulos ocupan una, dos o cuatro líneas sin control, el ojo salta de un lado a otro buscando el patrón. Fijar la proporción de imagen, limitar las líneas del título y alinear las acciones al pie de la tarjeta (con flexbox y margin-top: auto) devuelve la calma.

Si necesitas destacar un elemento (un producto en oferta, un artículo principal), hazlo con una variante prevista: una tarjeta que ocupa dos columnas o una con fondo de acento. Mejor una variante de diseño pensada que una tarjeta normal llena de etiquetas.

Tarjetas dentro de tarjetas

Este es el origen del panel «que cansa» del principio. Anidar contenedores con borde o sombra multiplica las líneas y reduce el espacio útil. Lo que funciona es usar la tarjeta solo para el objeto, y organizar el resto con espacio en blanco, separadores finos o títulos de sección. Si dentro de una tarjeta necesitas agrupar algo, un fondo sutil sin borde o un simple aumento del espacio suele bastar.

Clave: una tarjeta es una promesa de «esto es un objeto y puedes entrar». Cuando cada tarjeta cumple esa promesa y todas la cumplen igual, la rejilla se lee sola.

05La tarjeta entera clicable, accesible y cómoda

Al usuario le gusta poder pulsar en cualquier parte de la tarjeta. En móvil es casi obligatorio: el área táctil crece mucho y la ley de Fitts juega a nuestro favor. El reto es hacerlo sin envolver todo el contenido en un enlace, porque entonces el lector de pantalla anuncia un enlace con un nombre larguísimo (título, precio, fecha, descripción y texto del botón seguidos) y las acciones internas quedan atrapadas dentro.

La técnica más limpia, que Heydon Pickering popularizó en Inclusive Components, consiste en dejar un único enlace real en el título y estirar su área con un pseudoelemento que cubre toda la tarjeta:

<article class="card">
  <img src="atico-estepona.avif" alt="" class="card__media">
  <div class="card__body">
    <p class="card__eyebrow">Estepona · 3 dormitorios</p>
    <h3 class="card__title"><a href="/viviendas/atico-estepona">Ático con terraza frente al mar</a></h3>
    <p class="card__meta">185 m² · 1.250.000 €</p>
    <button class="card__save" aria-label="Guardar ático con terraza frente al mar">♡</button>
  </div>
</article>

.card { position: relative; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; }
.card__media { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
.card__body { display: flex; flex-direction: column; gap: 8px; padding: 20px; flex: 1; }
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__save { position: relative; z-index: 1; margin-top: auto; min-width: 44px; min-height: 44px; }
.card:has(a:focus-visible) { outline: 3px solid var(--color-focus); outline-offset: 2px; }
.card:hover { box-shadow: 0 8px 24px rgb(0 0 0 / 0.12); }

Varios detalles de este ejemplo merecen comentario. La imagen lleva alt="" porque el título ya describe la vivienda; repetirlo haría que el lector de pantalla lo dijera dos veces. El botón de guardar tiene position: relative y un z-index para quedar por encima del área estirada del enlace, y su aria-label incluye el nombre del objeto para que «Guardar» no sea ambiguo en una página con veinte tarjetas. El foco se dibuja en toda la tarjeta con :has(), de modo que quien navega con teclado ve claramente dónde está, en línea con el criterio 2.4.7 de WCAG sobre foco visible.

06Rejillas de tarjetas: columnas, espacio y responsive

Una buena tarjeta puede perder fuerza en una mala rejilla. Los criterios que aplicamos en el estudio, siempre ajustados a cada marca y a la retícula del proyecto, son estos:

• →Separación entre tarjetas: de 16 px en móvil a 24 o 32 px en escritorio. El hueco entre tarjetas tiene que ser mayor que el relleno interior, o las cajas parecen pegadas.
• →Ancho mínimo de tarjeta: alrededor de 260 a 300 px para tarjetas con imagen y texto. Por debajo, el título se parte en demasiadas líneas.
• →Columnas: una en móvil, dos en tablet y entre tres y cuatro en escritorio para contenido editorial; hasta cinco en catálogos muy visuales.
• →Altura: igual en cada fila, con las acciones alineadas al pie.

Con CSS Grid, la rejilla se adapta sola sin necesidad de puntos de corte:

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: clamp(16px, 2.5vw, 32px);
}

Y si la misma tarjeta tiene que vivir en una columna lateral estrecha y en una rejilla ancha, las consultas de contenedor (@container) permiten que cambie de vertical a horizontal según el espacio que tiene, y no según el ancho de la pantalla. Es una de esas mejoras que hacen que un componente sea realmente reutilizable.

07Ejemplo resuelto: el listado de una inmobiliaria en la Costa del Sol

Un caso típico en nuestra zona. Una inmobiliaria de la costa tenía un listado de viviendas con tarjetas que mostraban once datos cada una: referencia, tipo, zona, precio, metros construidos, metros de parcela, dormitorios, baños, piscina, garaje y certificado energético, además de tres botones. El resultado era una pared de iconos donde costaba distinguir una casa de otra.

El proceso que seguimos, y que puedes aplicar a casi cualquier catálogo:

1. 01Preguntar qué decide el clic. Hablando con el equipo comercial y mirando las búsquedas de la web, quedó claro que la gente filtraba por zona y precio, y decidía entrar por la foto y por los dormitorios.
2. 02Elegir protagonista. La fotografía pasó a 4:3, a sangre, con más presencia. El título se reescribió para describir la vivienda («Villa con vistas al mar en Benahavís») en lugar de repetir la referencia.
3. 03Reducir metadatos a una línea. Zona, dormitorios y metros, separados por puntos medios. El precio, debajo y en un peso mayor.
4. 04Mover el resto a los filtros y al detalle. Piscina, garaje y certificado energético se quedaron en los filtros y en la ficha, donde sí aportan.
5. 05Dejar una sola acción secundaria. El corazón de «Guardar» se mantuvo; «Compartir» y «Comparar» pasaron a la ficha.
6. 06Unificar alturas y revisar en móvil. Títulos limitados a dos líneas, acciones al pie y una columna en móvil con la imagen algo más baja para ver más de una vivienda por pantalla.

El listado pasó a respirar y, sobre todo, a parecerse a lo que vende la inmobiliaria: casas que se desean al verlas. Si trabajas en este sector, en la guía de diseño web para inmobiliarias de lujo ampliamos otros aspectos de esas webs.

08Checklist para revisar tus tarjetas

Antes de dar por cerrada una rejilla, repasamos esta lista:

• →Cada tarjeta representa un solo objeto y lleva a su detalle.
• →El formato tarjeta es el adecuado frente a una lista o una tabla.
• →Todas comparten orden de piezas, proporción de imagen y altura por fila.
• →Hay un elemento dominante y como mucho tres metadatos visibles.
• →El título es un enlace con texto descriptivo; la tarjeta entera responde al clic sin envolverla en un enlace.
• →Las acciones secundarias tienen su propio nombre accesible y área táctil suficiente.
• →El foco es visible en toda la tarjeta y el contraste del texto cumple 4,5:1.
• →El espacio entre tarjetas es mayor que su relleno y la rejilla se adapta sin cortes.
• →No hay tarjetas anidadas dentro de otras tarjetas.

09Tarjetas que ayudan a decidir

Bien usadas, las tarjetas son de los componentes más amables de una interfaz: invitan a explorar, ordenan lo diverso y funcionan igual en un móvil que en una pantalla grande. El secreto está menos en la sombra o el radio y más en las decisiones previas: qué objeto representa cada una, qué dato decide el clic y qué se queda fuera. Cuando eso está claro, el diseño visual fluye y la marca luce en cada caja.

En nuestros proyectos de diseño web y experiencia digital definimos estos componentes dentro del sistema de diseño de cada marca, para que la tarjeta de un producto, de un artículo o de un proyecto se sientan de la misma familia. Si tu catálogo o tu panel necesitan una revisión de este tipo, escríbenos y lo miramos juntos.