Estructura general
Sus características admiten la convivencia de contenido variado, entre lo estático (texto, imágenes, descripciones) y lo accionable (tarjetas, destacados, accesos). Esto es posible porque la plantilla disponibiliza el 100% del ancho de la grilla (12 columnas).
Cuándo usar
- Para describir un evento (fecha, descripción, fotos) y sumar secciones accionables como accesos a la programación, inscripciones o descargas de material.
- Para combinar información textual (qué es, requisitos, beneficios) con secciones interactivas como accesos a trámites, descargas y enlaces de contacto.
Cuándo no usar
- Para solicitudes de turnos, inscripciones o envíos de información. En estos casos la estructura debe guiar al usuario con formularios, validaciones y pasos claros, recomendamos usar la plantilla de Formularios multipágina
- Para agrupar información sobre un mismo tema en subtemas, en este caso recomendamos el uso de la plantilla de Página libro
Componentes utilizados
Tarjetas horizontales
Las variantes disponibles para este tipo de página incluyen todas las variaciones de la tarjeta horizontal, es decir, se pueden usar las variantes con icono, con imagen, sin multimedia, de 4 columnas y de 6 columnas de ancho.
Variantes disponibles de tarjetas horizontales:
- Variante de 4 columnas, con ícono/imagen.
- Variante de 6 columnas, con ícono/imagen.
Variaciones del componente:
- Con botones, con enlaces, con accesos y botones de descarga.
En desktop, las tarjetas horizontales de 4 columnas pueden agruparse hasta un máximo de 3 por línea, mientras que las de 6 columnas pueden hasta un máximo de 2 por línea. Recomendamos que la cantidad máxima de opciones no supere las 6 tarjetas para optimizar la toma de decisiones y evitar abrumar a las personas usuarias.
Podés consultar la documentación de tarjetas para conocer más sobre el uso y variantes del componente.
Ejemplos de uso
Las listas de requisitos llevan únicamente un subtítulo y contenido, cualquier elemento adicional debe ir fuera del componente.
Evitar combinar la disposición y/o los tipos de tarjetas dentro de un mismo grupo.
Destacados
Los destacados permiten resaltar contenido relevante que requiere un nivel jerárquico mayor al resto de la información. Su uso se limita a un destacado por página para asegurar el énfasis en los elementos destacados y evitar que compitan entre sí.
La variante disponible para el tipo de página simple es el destacado sin multimedia con fondo secundario. En todos los dispositivos ocupa el 100% del ancho de la pantalla. Se pueden utilizar todas las variantes de accionables según la necesidad del contenido.
Variantes disponibles:
- Destacado sin multimedia con fondo secundario.
Variaciones del componente:
- Con botones, con enlaces, con accesos y botones de descarga.
Variantes de accionables en el componente Destacado.
Ejemplos de uso
Accesos
Los accesos funcionan como puntos de ingreso a diferentes secciones y pueden agruparse cuando hay una similitud en su contenido.
Variantes disponibles:
- Acceso con borde y descripción, sin icono.
- Acceso con borde, sin icono, ni descripción.
Cantidad óptima de caracteres:
- Titulo: 2 líneas de texto, equivalente a 60 caracteres incluidos los espacios.
- Descripción: 3 líneas de texto, equivalente a 90 caracteres incluidos los espacios.
Variantes disponibles de Accesos para la plantilla de página simple.
Ejemplos de uso
Las listas de requisitos llevan únicamente un subtítulo y contenido, cualquier elemento adicional debe ir fuera del componente.
Las listas de requisitos llevan únicamente un subtítulo y contenido, cualquier elemento adicional debe ir fuera del componente.
Colapsables
Los colapsables sirven para mostrar y ocultar secciones de contenido relacionado en una página, lo que mejora la experiencia de las personas usuarias.
Variantes disponibles:
- Colapsable sólo título (obligatorio).
- Colapsable con título y descripción (opcional).
Variantes disponibles de Colapsables para la plantilla de página simple.
Contexto de uso
Para secciones de preguntas frecuentes. La cantidad máxima de opciones para incluir en una sección de preguntas frecuentes es de 6 colapsables, y una cantidad mínima de 4 opciones.
Si son menos de 4 preguntas frecuentes recomendamos que no se use el componente Colapsables. En cambio, sí recomendamos redactar la información directamente en el cuerpo.
Contenido de texto
Podés consultar las pautas y lineamientos de contenidos para conocer más prácticas recomendadas sobre escritura en interfaces digitales.
Títulos
El título principal de la página es un encabezado H1 que admite hasta 3 líneas de extensión. En cambio, los títulos de las secciones dentro de la página son encabezados H2 y admiten un máximo de 70 caracteres, equivalente a una línea de texto.
En dispositivos desktop, la extensión del contenedor de los encabezados H2 no debe exceder las 8 columnas de la grilla.
Párrafos de texto
En dispositivos desktop, el contenedor del párrafo de texto no debe ser mayor a 8 columnas. Nunca el 100% porque se generan líneas de texto muy largas y perjudica la lectura.
Galería de imágenes
Las imágenes se utilizan como complemento figurativo o ilustrativo de la información del párrafo de texto anterior o posterior, por eso sugerimos que su uso se limite a brindar mayor contexto a la persona usuaria.
En una página simple, las imágenes se ubican antes, después, o entre párrafos de texto, y pueden ser parte de una galería de imágenes a través de una cuadrícula de fotos interactivas y de una vista ampliada con el formato de carrusel. El máximo de imágenes para este tipo de formato es hasta 7 imágenes.
Ejemplos de uso
En la continuación de un párrafo de texto, recomendamos mantener la disposición de 8 columnas para ubicar las imágenes.
En desktop, evitar que las imágenes ocupen el 100% del ancho de la página para no interferir en la lectura e interacción del usuario con la página.
Espaciados
Para mantener una estructura clara, legible y alineada al sistema de grillas, recomendamos los siguientes espaciados entre secciones para dispositivos desktop:
- Espaciado horizontal de 48px: Entre secciones consecuentes del cuerpo de la página, incluye secciones de contenido de texto, secciones de tarjetas, accesos u otro.
- Espaciado horizontal de 24px: Entre el encabezado H2 de la sección y el contenido en sí mismo, pueden ser tarjetas, accesos, contenido de texto u otro.
