Definición
Una tarjeta o card es un elemento que agrupa un conjunto de información sobre un recurso en un contenedor de tamaño y distribución fija. Se asemeja a una tarjeta de juego que invita a las personas usuarias a interactuar con ella.
Su uso es muy variado: pueden aparecer por separado o formando parte de listados o carruseles de tarjetas.
Anatomía
Las partes del componente son:
- Contenedor
- Imagen principal (opcional): Las proporciones admitidas son 16:9, 1:1 y 3:4. Ocupa el 100% del ancho en tarjetas verticales y el 100% del alto en las horizontales.
- Bloque de identificación:
- Gráfico (opcional): Icono o imagen pequeña representativa.
- Título: Una o varias líneas de texto.
- Subtítulo (opcional): Una o varias líneas de texto.
- Contenido adicional (opcional): Debe mostrar una jerarquía visual clara, priorizando el contenido más relevante para la lectura. Pueden incorporarse bloques de texto, enlaces...
- Acciones secundarias (opcional): Interacciones relacionadas con el contenido de la tarjeta (p.ej. un botón de acción, compartir en redes sociales...).
Tipos
Tarjeta vertical
Tarjeta horizontal
Pautas de uso
Incluye un enlace principal
Por lo general, cada tarjeta debe disponer de un enlace principal que desarrolla la información en detalle. En estos casos, introduce el enlace al menos en la imagen principal y el título.
Mantén la coherencia en la información
Una tarjeta solo debe contener una idea única que puede incluir una llamada a la acción o la opción de navegar a contenido más detallado. El contenido de una tarjeta debe ser conciso y ofrecer sólo una vista previa del contenido detallado. No utilices este componente si la información que contiene no está relacionada entre sí, por ejemplo incluyendo enlaces a diferentes secciones no relacionadas
Componentes relacionados
Similar a
Forma parte de:
Recursos asociados al componente
Implementación:
Storybook (solo accesible desde la RCJA)
Control de versiones
| Fecha | Versión | Notas |
|---|---|---|
| 20/03/2026 | 1.3 | Se simplifican los tipos de tarjetas y actualizan la definición y pautas de uso |
| 08/10/2023 | 1.2 | Se normaliza la estructura y forma de presentación del componente |