Destacado

Tipos de destacado

Destacado banner

Ocupa el 100 % del ancho de la página siguiendo las grillas de Obelisco. Puede tener fondo primario y secundario, e incluir contenido multimedia como una imagen o video.

Destacado conjunto

Se usa como un par de destacados que ocupan cada uno el 50 % del ancho de la página siguiendo las grillas de Obelisco. No llevan fondo, contienen 1 accionable, y pueden incluir contenido multimedia como una imagen o video. El par de destacados siempre debe tener el mismo tipo de accionable (por ejemplo, dos de enlace). Solo se puede utilizar 1 destacado conjunto por página.

Destacado lateral

Ocupa 4 columnas según las grillas de Obelisco, y está ubicado en el lateral derecho del cuerpo de la página. En mobile se adapta al ancho completo de la grilla del dispositivo, quedando por encima del contenido y después del encabezado. Puede tener fondo primario o secundario, y no incluye contenido multimedia. Solo se puede utilizar 1 destacado lateral por página. Si convive con otro componente como un mapa, se ubica en primer lugar.

Destacado mobile

En mobile, todos los destacados se comportan de esta manera (a excepción del destacado lateral). Ocupa el 100 % del ancho del dispositivo. Puede tener fondo primario y secundario, e incluir contenido multimedia como una imagen o video.

Diseño y estructura (contexto de uso)

Multimedia

Un destacado puede incluir una imagen o un video acompañando al contenido y a la acción del destacado. El elemento principal o focal de la imagen deben situarse en el centro de la misma, ya que al adaptarse al mobile la imagen del Destacado se recorta de los lados. La relación de aspecto de la imagen debe ser 16:9.

Cuando se inserte un video, se deben eliminar los atributos width y height de la etiqueta <iframe>. Además, se debe agregar la clase "card-img". La etiqueta <iframe> debe tener un atributo title que contenga un texto relacionado con la información del elemento.

Contenido

Los destacados incluyen obligatoriamente un título y una bajada descriptiva. La descripción debe ser breve y concisa.

Accionables

Los destacados contienen obligatoriamente al menos un accionable que invita a la persona usuaria a hacer algo; este puede ser un CTA (Call to Action o Llamado a la Acción), un enlace externo, un acceso o un botón de descarga.

Con 2 botones

Todos los destacados, a excepción del destacado conjunto y el destacado lateral, pueden llevar 2 CTAs de ser necesario: un botón primario y un botón secundario.

Con 1 botón

Todos los destacados pueden llevar 1 CTA de ser necesario: un botón primario.

Con enlace externo

Todos los destacados pueden llevar un enlace externo que te redirige a una página por fuera del entorno de Buenos Aires.

Con acceso

Todos los destacados pueden llevar un acceso que te redirige a una página de área dentro del entorno de Buenos Aires.

Con botón de descarga

Se utiliza cuando es necesario descargar cualquier tipo de contenido dentro del destacado. No es posible tener más de un botón de descarga o armar una lista de botones de descarga dentro del destacado.

Accesibilidad

Imagen del destacado

La imagen del destacado debe contar con un atributo alt que contenga un texto breve que describa la imagen. Esto será relevante para personas que utilicen lector de pantalla y también dará contexto en caso de que la imagen no pudiera cargarse. En caso de que la imagen sea decorativa el atributo deberá permanecer vacío (sin texto alguno o espacios). Ejemplo: alt=""

Video del destacado

Es recomendable que el video del destacado contenga dentro de su etiqueta <video></video>, una etiqueta <track />. Esto permite especificar pistas de texto cronometradas en formato WebVTT para poder gestionar audiodescripciones o subtítulos.

Usabilidad

Buenas prácticas

Malas prácticas