Tarjeta vertical
Biblioteca de componentes
Cómo usar este componente
Las tarjetas verticales presentan información relacionada en un formato compacto y visualmente atractivo, lo que facilita a los usuarios la navegación y el acceso al contenido. Proporcionan un breve resumen del contenido, a menudo con un enlace a más detalles, y generalmente se muestran junto con otras tarjetas para agrupar contenido relacionado.
Resalta visualmente y enlaza con otro contenido, con una imagen o icono y una breve descripción.
Anatomía de la tarjeta vertical
- Tarjetas por fila: 1-5 disponibles
- Estilo de borde: Elevado, plano o icono
- Imagen: Compatible con PNG o SVG
- Título
- Descripción
- Botón
- Espacio entre filas: espacio entre cada fila para tarjetas que abarcan varias filas
Prácticas recomendadas
- Utilice tamaños de imagen consistentes, asegurando relaciones de aspecto uniformes.
- Proporcione información esencial y resumida.
- Usa elementos coherentes en todas las tarjetas de un grupo.
- Utilice iconos SVG con la tarjeta de estilo Icono, en lugar de fotografía.
- Evite mostrar más elementos por fila que el número real de tarjetas.
- No mezcles diferentes tipos de contenido en cartas de la misma colección.
- No abrume la tarjeta con contenido excesivo.
Ejemplos
Mal ejemplo:
- Tamaños de imagen inconsistentes
Problema: Las imágenes varían en tamaño, lo que lleva a una presentación visual desigual.
Recomendación: Utilice relaciones de aspecto consistentes para las imágenes (preferiblemente 900x600 píxeles). - Elementos de tarjeta inconsistentes
Problema: Algunas tarjetas tienen descripciones, títulos o botones, mientras que otras no.
Recomendación: Garantizar la coherencia entre las tarjetas. Si una tarjeta incluye una descripción, un título y un botón o enlace de llamada a la acción, asegúrese de que todas las tarjetas incluyan estos elementos. - Longitud inconsistente del texto del botón
Problema: El texto del botón varía significativamente, lo que provoca un formato incoherente.
Recomendación: Mantenga longitudes de texto de botón similares en todas las tarjetas para evitar un formato deficiente.
Buen ejemplo: Utiliza tamaños de imagen y elementos coherentes, siguiendo las directrices de prácticas recomendadas.
Tipos de tarjetas verticales
Elevado
Cuenta con un borde de sombra paralela y un botón secundario.
Plano
Sin borde y utiliza un botón terciario como llamada a la acción.
Icono
Muestra un icono, como un SVG, para ilustrar el contenido. Se puede hacer clic en toda la tarjeta y aparece un fondo cuando se pasa el cursor sobre ella.
Colocación
- Coloque las tarjetas verticales en áreas amplias de contenido principal, con elementos de alta prioridad cerca de la parte superior.
- Ajuste el número de tarjetas por fila de una a cinco, según el ancho del área de contenido.
Pautas de accesibilidad
- Asegúrese de que todas las imágenes tengan un texto alternativo apropiado, a menos que la imagen no agregue información adicional al contenido de la página, luego márquela como decorativa.
- Use un texto de botón claro y descriptivo (evite frases como "Haga clic aquí" o "Lea más").
- Cada botón debe tener una etiqueta única.
- Al vincular a contenido externo, configure los enlaces para que se abran en una nueva ventana para informar a los usuarios.
| Llaves | Acción |
| Pestaña | Navega al siguiente elemento accionable |
| Espacio/entrar | Activa el botón o enlace |
Lista de verificación del coordinador web
Determinar el contenido:
- Decide el número de cartas necesarias (hasta cinco por fila).
- Asegúrese de que cada tarjeta tenga una imagen o icono, una descripción y, opcionalmente, un título y un texto/enlace de botón.
Selección de estilo:
- Elige un estilo de borde: Elevado, plano o icono.
- Establezca el margen inferior y el espacio entre filas para el espaciado.
Consistencia de la imagen:
- Utilice imágenes con el mismo tamaño y relación de aspecto.
- Marque la casilla de verificación de imagen decorativa para imágenes no informativas.
Configuración de enlaces:
- Incluya texto de botón y enlaces donde sea necesario.
- Asegúrese de que los enlaces externos se abran en una nueva ventana.
Uniformidad de contenido:
- Mantenga la coherencia en todas las tarjetas en términos de elementos incluidos (por ejemplo, todas tienen descripciones si una las tiene).