Card

Cuando usarlo

Úsala para presentar un grupo de contenidos del mismo tipo que la persona debe explorar y elegir: trámites destacados, beneficios, servicios de una institución o noticias. Antes de armarla, decide qué variante necesita cada contenido:

Interactiva completa: la tarjeta entera lleva a un solo destino (el detalle de un trámite o beneficio).
Con acciones: hay dos acciones distintas o una acción que no es navegar (postular, agendar, descargar).
Sin interacción: solo informa algo que se consulta ahí mismo (una hora agendada, los datos de una oficina).
Con fotografía: la imagen aporta al contenido, como en noticias, eventos o lugares.

Si el contenido se compara dato a dato, usa Table. Si es una lista larga de elementos homogéneos (documentos, solicitudes, notificaciones), usa Item list.

Buenas prácticas

Recomendado: Usa la card interactiva cuando toda la tarjeta lleva a un solo destino

Si la card solo lleva al detalle de un contenido, haz clicable la tarjeta completa: el área de clic es mayor y el título en estilo enlace anticipa el destino. No agregues botones internos.

Recomendado: Usa botones cuando la card ofrece acciones distintas

Si hay más de una acción, o la acción hace algo distinto de ver el detalle (postular, agendar), deja la tarjeta estática y pon los botones al pie: una sola acción principal (Primary) y como máximo una de apoyo.

Recomendado: Usa la card sin interacción para información de consulta

Cuando la card solo muestra información que se lee ahí mismo, déjala sin enlaces ni botones y con el título en texto plano. Así no promete un destino que no existe.

Recomendado: Usa fotografía solo cuando la imagen aporta al contenido

Reserva la variante con fotografía para contenidos donde la imagen ayuda a reconocerlos o a decidir (noticias, eventos, lugares), y usa una imagen distinta y específica para cada card. En trámites y servicios, un ícono o ningún encabezado comunica mejor.

Malas prácticas

No recomendado: No hagas que una card sin interacción parezca clicable

Si la card no lleva a ningún lugar, no uses el estilo de enlace en el título ni imites el estado hover. La persona intentará hacer clic y no pasará nada.

No recomendado: No repitas el destino del título en un botón “Ver más”

Si el título ya es el enlace al detalle, un botón “Ver más” al mismo lugar suma una parada de teclado y compite visualmente sin aportar. Usa solo el enlace o convierte la card en interactiva.

No recomendado: No repitas la misma imagen en todas las cards

Una misma fotografía (o una imagen genérica) en cada card de un grupo no ayuda a distinguirlas y solo ocupa espacio. Si no tienes una imagen propia para cada contenido, usa la card sin fotografía.

Card

Anatomía del componente

Propiedades y configuraciones

Presentación

Composición

Orientación