Artículos destacados
Biblioteca de componentes
Cómo usar este componente
Utiliza el componente de Artículos Destacados para resaltar y enlazar a páginas de contenido seleccionadas, incluidas páginas en AEM o enlaces externos. Soporta dos opciones de distribución: — una disposición horizontal de filas o una disposición destacada que enfatiza un solo elemento.
Artículos destacados y enlaces a contenido relacionado con una imagen y una breve descripción opcional.
Artículos destacados sobre anatomía
- Imagen
- Título
- Descripción
- Botón (opcional)
Diseño destacado
Disposición horizontal
Mejores prácticas
- Utiliza tamaños de imagen consistentes, asegurando relaciones de aspecto uniformes. (900x600px)
- Proporciona información esencial y resumida.
- Para la disposición horizontal, haz que todas las descripciones sean de longitud comparable.
- Proporciona títulos descriptivos, ya que estos serán los enlaces de texto para cada elemento.
- Evita mostrar más elementos por fila que el número real de artículos.
- Evita mezclar diferentes tipos de contenido dentro del mismo componente de Artículos Destacados.
Ejemplos
Mal ejemplo:
- El componente de Artículos destacados se coloca en un tramo de columnas estrecho (6:6 o menor), lo que hace que el diseño destacado pierda énfasis.
- La disposición utiliza más columnas que los artículos disponibles, dejando espacio vacío y desequilibrio visual.
- Un número impar de artículos se muestra en una disposición de varias columnas, lo que resulta en espacio no utilizado y desalineación.
Buen ejemplo: Artículos destacados utiliza columnas amplias, seleccionando el diseño destacado u horizontal para coincidir con el número de artículos mostrados y mantener un equilibrio visual claro.
Ubicación
Coloca el componente de Artículos Destacados en áreas de contenido amplias y principales.
Características de los artículos destacados
- Funciona mejor en grandes extensiones de columnas; Usa al menos 9 columnas en diseños 9:3.
- Utiliza títulos enlazados para navegar a contenido relacionado o detallado.
- El botón opcional de calltoaction puede usarse para exponer artículos relacionados adicionales.
- El diseño destacado requiere que los autores designen un artículo principal en configuración. Los autores deberían incluir intencionadamente un artículo principal en lugar de depender de la actualidad o el orden por defecto.
Consideraciones de accesibilidad
- Todas las imágenes deben tener texto alternativo descriptivo.
- Todos los botones y enlaces deben tener texto único y descriptivo. Por ejemplo, no deberías tener varios botones en una página que digan "Leer más".
Lista de verificación para coordinador web
- Determinar el contenido: Decidir el número de cartas necesarias (hasta cuatro por fila). Asegúrate de que cada tarjeta tenga una imagen, un título y un enlace y, opcionalmente, una descripción en texto.
- Selección de estilo: Elige entre la disposición horizontal en filas o la disposición destacada con un artículo principal y destacado.
- El diseño horizontal soporta cualquier número de elementos, pero no incluya tantos que abrumes al usuario final con elecciones.
- El diseño destacado debe incluir solo 3-4 elementos. Si se incluyen más de cuatro, solo se mostrarán los primeros cuatro.
- Consistencia de imagen: Usa imágenes con el mismo tamaño y relación de aspecto. Marca la casilla de verificación de imagen decorativa para imágenes no informativas.
- Configuración de enlaces: Usa títulos descriptivos, ya que serán el texto de tu enlace. Asegúrate de que los documentos y enlaces externos se abran en una ventana nueva.
- Uniformidad de contenido: Mantener la coherencia entre todos los elementos en cuanto a los elementos incluidos (por ejemplo, todos tienen descripciones si alguno la tiene).
Actualizado el 7 de mayo de 2026