Uso
Cuándo usar
- Para organizar y agrupar información relacionada, como artículos, noticias o secciones de un sitio web.
- Con fines de navegación, para que la persona usuaria disponga de distintos puntos de entrada sobre el contenido relacionado y acceda a más detalles del mismo.
Cuándo no usar
- Para desencadenar una acción o evento, considerá utilizar el componente Botón.
- Para navegar a otro sitio web, o abrir contenido en una nueva pestaña, considerá utilizar el componente de Enlace.
- Para estructurar contenido estático que no es accionable, ni redirige a ningún lado, considerá utilizar el componente Lista informativa.
Disposición
En Obelisco existen 2 disposiciones posibles: vertical y horizontal. La disposición del componente sirve para generar diferentes niveles de jerarquía según el tipo de tarjeta.
Tipos de tarjeta vertical
Predeterminada
Se utiliza para mostrar información de mayor peso visual en la página, y lleva una imagen descriptiva del contenido.
Noticias
Se utiliza para modular contenido de noticias en páginas simples y páginas de área.
Eventos
Se utiliza para mostrar información sobre un evento.
Tipos de tarjeta horizontal
Predeterminada
Contiene información que no precisa de imágenes descriptivas. Dentro del entorno de Buenos Aires se utiliza, por ejemplo, para agrupar programas o servicios de un área.
Temática
Se utiliza en la página de inicio de Buenos Aires para redirigir a los principales trámites y servicios.
Agrupación
Las tarjetas se utilizan en grupo para organizar la navegación y redirección a contenidos relacionados de un mismo sitio web.
Utilizar tarjetas con la misma disposición y del mismo tipo dentro de un mismo grupo.
No combinar la disposición y/o los tipos de tarjetas dentro de un mismo grupo.
Modulación
Las tarjetas y sus variantes cuentan con un ancho fijo establecido. Dependiendo del tipo y el dispositivo, se modulan de diferentes maneras. En desktop, las tarjetas verticales pueden agruparse hasta un máximo de 3 por línea.
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.
En mobile, todas las tarjetas van una debajo de la otra y ocupan el ancho total de la grilla del dispositivo.
En mobile, las tarjetas de noticias forman un carrusel horizontal para facilitar su visualización.
Ejemplos de uso
Respetar la modulación según la disposición y el tipo de tarjeta, independientemente del espacio disponible en la página.
No estirar o cambiar la modulación de las tarjetas únicamente por rellenar el espacio en blanco. Cambiar la composición del componente genera rupturas en el contenido, que afectan la legibilidad y la escaneabilidad de la información.
Contexto de uso
Para agrupar información cuyo contenido principal es visual. Generalmente se utilizan en páginas de cultura o turismo para captar la atención de la persona usuaria.
Para agrupar información cuyo contenido textual es más relevante que el contenido visual, pero necesite un ícono que ayude a identificar la categoría o tipo de acción, por ejemplo, trámites o servicios.
Para promocionar actividades culturales, recreativas o institucionales, brindando información sobre fecha, tipo de evento y público al que está dirigida.
Es obligatorio indicar el tipo de evento, por ejemplo: Muestra, Taller, Charla, Recital, y el tipo de público, por ejemplo: Infantil, Adultos mayores, Familiar, etc.
Para destacar novedades relevantes de forma visual y resumida, con un acceso directo al detalle de cada nota.
Se recomienda incluir siempre una fecha visible para brindar contexto del contenido.
Contenidos
Información para eventos
Sobrelínea
La sobrelínea se utiliza para indicar el tipo de evento y permite filtrar actividades según esa categoría. Debe limitarse a un máximo de dos palabras.
Etiquetas (tag)
La tarjeta de eventos tiene dos etiquetas que son obligatorias; la primera funciona como nexo adicional al tipo de evento, puede ser una etiqueta relacionada, y la segunda al tipo de público al que está dirigido el evento.
Formato de fechas:
- Fecha única: 5 de noviembre
- Rango de fechas: Del 5 al 10 de noviembre
- Múltiples fechas: 5, 10, 15 y 20 de noviembre.
Si hay más de 4 fechas disponibles, se recomienda destacar la próxima fecha más cercana y ofrecer el detalle completo en la página del evento.
Formato de horarios:
- Horario único: 15:00 h
- Rango de horarios: 15:00 - 16:00 h
- Múltiples horarios: 16:00 | 18:00 | 20:00
Si hay más de tres horarios, se recomienda usar el formato resumido con un “+” y detallar el resto en la página del evento. Por ejemplo: 16:00 | 18:00 | 20:00 +
Información para noticias
Estos datos ayudan a la persona usuaria a contextualizar la información, distinguir entre distintos tipos de contenido y contribuyen al orden cronológico de las noticias.
Fecha de publicación:
Debe mostrarse en formato accesible (ej. “12 de septiembre de 2025”) y visible en el nivel superior del contenido.
Etiquetas (tag)
La tarjeta de noticias debe incluir al menos una etiqueta temática que permita identificar temática o categoría de la noticia, por ejemplo, "Cultura" "Musica"
Para conocer más información podes consultar la guía para redactar una noticia
