Tarjeta vertical
Biblioteca de componentes
Cómo utilizar este componente
Las tarjetas verticales presentan información relacionada en un formato compacto y visualmente atractivo, lo que facilita a los usuarios la exploración y el acceso al contenido. Proporcionan un breve resumen del contenido, a menudo con un enlace a más detalles, y normalmente se muestran junto a otras tarjetas para agrupar el contenido relacionado.
Destaca visualmente y enlaza con otros contenidos, con una imagen o un icono y una breve descripción.
Anatomía vertical de la tarjeta
- Cartas 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 uniformes, lo que garantiza relaciones de aspecto uniformes.
- Proporcionar información esencial y resumida.
- Utilice elementos coherentes en todas las tarjetas de un grupo.
- Usa iconos SVG con la tarjeta Estilo de 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 las cartas de la misma colección.
- No abrumes la tarjeta con contenido excesivo.
Ejemplos
Mal ejemplo:
- Tamaños de imagen inconsistentes
Problema: Las imágenes varían en tamaño, lo que provoca 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 cartas 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úrate de que todas las tarjetas incluyan estos elementos.
- Longitud de texto de botón incoherente
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 tarjetas verticales en áreas de contenido principales amplias, con elementos de alta prioridad cerca de la parte superior.
- Ajuste el número de tarjetas por fila de una a cinco, en función del ancho del área de contenido.
Pautas de accesibilidad
- Asegúrese de que todas las imágenes tengan el texto alternativo adecuado, a menos que la imagen no agregue información adicional al contenido de la página y, a continuación, márquelas como decorativas.
- Use texto claro y descriptivo de los botones (evite frases como "Haga clic aquí" o "Leer 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:
- Elija 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 el texto de los botones y los enlaces donde sea necesario.
- Asegúrese de que los enlaces externos se abran en una nueva ventana.
Uniformidad del contenido:
- Mantenga la coherencia en todas las tarjetas en términos de elementos incluidos (por ejemplo, todas tienen descripciones si hay una).