Página de área - Nivel 2

Con este template buscamos mejorar la experiencia de las personas a la hora de navegar nuestro sitio web. Buscamos crear jerarquías claras de contenido donde se aplique el sistema de diseño Obelisco. Esta guía tiene como fin orientar a quienes trabajan como webmasters para que sepan qué tipo de componente se utiliza en las distintas casuísticas. 

Acceder a la plantillaopen_in_new

¿A qué llamamos nivel 2?

Se llama segundo nivel de navegación a toda página que se desprenda de los atajos de las home de Ministerios.  Son páginas que por su contenido funcionan como nexo a más información de un área específica y buscan mostrar los destacados, programas y servicios. 

Encabezado de página

Se compone con los siguientes elementos:

  • Migas de pan que nos indican el camino recorrido hasta llegar a dónde estamos navegando. 
  • Título
  • Bajada
  • Desplegables de “Institucional” y/o “Transparencia activa”. Evitamos sumar más desplegables. La idea de este bloque es que sea la presentación de lo que las personas encontrarán al seguir scrolleando. 
Ejemplo encabezado de área

Accesos rápidos / destacados

Contexto de uso

El propósito de la sección es acercar al usuario las principales acciones que el área considere relevantes para interactuar. Es importante mencionar que cuantas más opciones haya, más va a demorar el usuario en decidirse por la acción, por lo tanto es primordial que el área tenga una elección clara en el contenido de las tarjetas destacadas.

Encabezado

Llevan un título que puede ser "Accesos rápidos" o "Destacados", siempre haciendo referencia que esos son los destacados de la página. 

Variante de componente

Se utiliza la tarjeta horizontal con ícono con la alineación interna al borde superior izquerdo. Sugerimos que tanto el título como la bajada no lleve más de dos líneas. 

Ejemplo accesos rapidos en página de área

Malas practicas

close

Generar puntos de tensión en la lectura y desequilibrio visual en el inicio de la página. En las situaciones en las que haya tres tarjetas en la primera línea y una por debajo, recomendamos reubicar la última tarjeta en la sección que corresponda y velar por el equilibrio en la página.

close

Presentar sólo dos opciones como destacadas. En estas situaciones, recomendamos preservar la simetría y el equilibrio al inicio de la página ya que un diseño agradable crea respuestas positivas en el cerebro de las personas. Por lo tanto, considerar incluir una tercera tarjeta con contenido relevante para los usuarios.

close

Creer que todo es importante para destacar. No recomendamos tener más de 6 tarjetas destacadas, ya que el tiempo que lleva tomar una decisión aumenta con el número y la complejidad de las opciones.

close

En las situaciones que haya 6 tarjetas destacadas recomendamos colocar los elementos menos importantes en medio de la lista y las acciones claves en los extremos izquierdo y derecho para aumentar la memorización.

Programas

Los programas son contenido de valor que crean desde las distintas áreas de gobierno para acercarse a los vecinos, para promover su trabajo o las políticas que llevan adelante durante su gestión. Por eso es que para este tipo de contenidos se utilizan las tarjetas horizontales con imagen. 

Esta información se presenta en grilla de tres con un ancho de 4 columnas.

Esta agrupación de tarjetas de programas siempre llevan un título que haga referencia a dicho grupo.

Ejemplo encabezado de área

Excepción de uso

En caso que solo haya dos programas para presentar, puede admitirse una grilla de dos con un ancho de 6 columnas para cada tarjeta. En caso que se itere el contenido y se incorporen más de dos programas, deberá volver a utilizarse la grilla de 3 con ancho de 4 columnas.

Servicios

Son aquellas acciones proporcionadas por el gobierno para satisfacer necesidades públicas y mejorar la calidad de vida de los/as ciudadanos/as y residentes de la Ciudad de Buenos Aires.

La agrupación de estas tarjetas lleva un título "Servicios" o "Nuestros servicios" y se utiliza el acceso solo con título. Se utilizan en grilla de tres columnas por fila.

Ejemplo encabezado de área

Destacados

Contexto de uso

En caso que haya contenido a destacar tenemos dos variantes disponibles del template.

Un solo destacado

Se utiliza el destacado con fondo. Compuesto de título, bajada y accionable con el fondo grisulado. Para los accionables hay tres variantes: enlace, acceso y botón primario. Se elegirá el accionable acorde al tipo de contenido.

Ejemplo encabezado de área

Dos destacados

Se utiliza el panel vertical. Se posicionan ambos destacados uno al lado del otro, debajo de los servicios.

Ejemplo encabezado de área

Noticias

Se utilizan tarjetas de noticia con etiquetas y fecha. Se muestran tres por página, con el enlace de ver todas las noticias.

Ejemplo encabezado de área

Información institucional

Este bloque se compone de la siguiente información.

Título: Información Institucional. 

  • Nombre del funcionario/a a cargo.
  • Cargo

Contacto

  • Teléfono de contacto
  • Correo electrónico

La información institucional se aplica siempre y cuando el área tenga un funcionario a cargo. En caso de que no haya alguna persona con este rol, este bloque de información no debe incluirse y van únicamente las redes sociales. 

Título: Redes sociales

Facebook   /   Instagram   /   X   /   YouTube

Se utiliza el acceso con iconografía correspondiente a la red social y título. 

Ejemplo encabezado de área

Contenido en esta página


<!DOCTYPE html>
<html lang="es">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

  <title>Área de gobierno 2do nivel - Opción 1</title>

  <!-- Obelisco -->
  <!-- OBELISCO CDN´s -->
  <!-- Obelisco -->

</head>

<body>
  <main id="main">
    <article>
      <header class="bg-light pt-2 pt-xl-3 pb-4 pb-xl-5 mb-4 mb-xl-5">
        <div class="container pt-1">
          <nav aria-label="Navegación secundaria" class="py-3">
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="#">Inicio</a></li>
              <li class="breadcrumb-item">
                <a href="#">Área de Gobierno</a>
              </li>
            </ol>
          </nav>
          <div class="row">
            <div class="col-12 col-xl-8">
              <div class="pt-xl-1 pb-xl-2">
                <h1 class="mb-3 mb-xl-2">Encabezado de la página</h1>
                <p class="lead">
                  Esta es la descripción de la página. Lorem ipsum dolor sit amet consectetur. Nulla at sit mi id quis
                  tortor lorem sit. Pretium aliquam vitae quisque.
                </p>
              </div>
              <div class="d-block d-md-flex flex-wrap pt-3">
                <div class="dropdown mb-2 mb-md-3 me-3">
                  <button type="button" class="btn btn-dropdown btn-dropdown-border btn-lg" data-bs-toggle="dropdown"
                    aria-expanded="false">
                    <span class="btn-dropdown-text ellipsis-1">Institucional</span>
                    <span class="material-symbols-rounded btn-dropdown-icon" aria-label="hidden">
                      expand_more
                    </span>
                  </button>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="#"><span class="item-text">Ministerio de Cultura</span></a>
                    <a class="dropdown-item" href="#"><span class="item-text">Subsecretaría Gestión Cultural</span></a>
                    <a class="dropdown-item" href="#"><span class="item-text">Subsecretaría de Políticas Culturales y
                        Nuevas
                        Audiencias</span></a>
                    <a class="dropdown-item" href="#"><span class="item-text">Ente Autárquico Teatro Colón</span></a>
                    <a class="dropdown-item" href="#"><span class="item-text">Organigrama</span></a>
                    <a class="dropdown-item" href="#"><span class="item-text">Guia de Funcionarios</span></a>
                    <a class="dropdown-item" href="#"><span class="item-text">Contacto</span></a>
                  </div>
                </div>
                <div class="dropdown mb-2 mb-md-3 me-3">
                  <button type="button" class="btn btn-dropdown btn-dropdown-border btn-lg" data-bs-toggle="dropdown"
                    aria-expanded="false">
                    <span class="btn-dropdown-text ellipsis-1">Transparencia activa</span>
                    <span class="material-symbols-rounded btn-dropdown-icon" aria-label="hidden">
                      expand_more
                    </span>
                  </button>
                  <div class="dropdown-menu">
                    <a class="dropdown-item" href="#"><span class="item-text">Escalsas salariales</span></a>
                    <a class="dropdown-item" href="#"><span class="item-text">Sueldos de funcionarios</span></a>
                    <a class="dropdown-item" href="#"><span class="item-text">Concurso de personal</span></a>
                    <a class="dropdown-item" href="#"><span class="item-text">Presupuesto abierto</span></a>
                    <a class="dropdown-item" href="#"><span class="item-text">Compras y contrataciones de bienes y
                        servicios</span></a>
                    <a class="dropdown-item" href="#"><span class="item-text">Informes de auditoría</span></a>
                    <a class="dropdown-item" href="#"><span class="item-text">Trámites y servicios</span></a>
                    <a class="dropdown-item" href="#"><span class="item-text">Declaraciones juradas</span></a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </header>

      <div class="container pb-4 pb-md-5">
        <h2 class="mb-3 mb-md-4">Destacados</h2>
        <div class="card-items-3">
          <div class="col">
            <div class="card card-horizontal">
              <span class="material-symbols-rounded card-icon">assignment</span>
              <div class="card-body">
                <h3 class="card-title">
                  <a href="#" class="card-title-link">Título de la tarjeta</a>
                </h3>
                <p class="card-text">Descripción de la tarjeta</p>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card card-horizontal">
              <span class="material-symbols-rounded card-icon">assignment</span>
              <div class="card-body">
                <h3 class="card-title">
                  <a href="#" class="card-title-link">Título de la tarjeta</a>
                </h3>
                <p class="card-text">Descripción de la tarjeta</p>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card card-horizontal">
              <span class="material-symbols-rounded card-icon">assignment</span>
              <div class="card-body">
                <h3 class="card-title">
                  <a href="#" class="card-title-link">Título de la tarjeta</a>
                </h3>
                <p class="card-text">Descripción de la tarjeta</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container py-4 py-md-5">
        <h2 class="mb-3 mb-md-4">Encabezado de la sección</h2>
        <div class="access-items-3">
          <div class="col">
            <a href="#" class="list-group-item">
              <div class="access-content">
                <span class="access-title">Acceso</span>
              </div>
            </a>
          </div>
          <div class="col">
            <a href="#" class="list-group-item">
              <div class="access-content">
                <span class="access-title">Acceso</span>
              </div>
            </a>
          </div>
          <div class="col">
            <a href="#" class="list-group-item">
              <div class="access-content">
                <span class="access-title">Acceso</span>
              </div>
            </a>
          </div>
        </div>
      </div>

      <div class="panel-horizontal-content bg-light">
        <div class="panel-horizontal">
          <div class="panel-body">
            <h2 class="panel-title">Título del destacado</h2>
            <p class="panel-text">
              Este es el cuerpo de un destacado. Debe ser breve y conciso, de pocas
              líneas. No puede contener negritas ni enlaces. Este es el cuerpo de un
              destacado. Debe ser breve y conciso, de pocas líneas. No puede contener
              negritas ni enlaces
            </p>
            <div class="panel-footer">
              <a class="btn btn-primary btn-lg" href="#" rel="noopener noreferrer">
                Botón
              </a>
            </div>
          </div>
        </div>
      </div>

      <div class="container py-4 py-md-5">
        <h2 class="mb-3 mb-md-4">Información de interés</h2>
        <div class="card-items-3 mt-1">
          <div class="col">
            <div class="card card-horizontal">
              <img src="../../assets/panel/educacion-panel.png" class="card-img" alt="descripción de imagen" />
              <div class="card-body">
                <h3 class="card-title">
                  <a href="#" class="card-title-link">Título de la tarjeta</a>
                </h3>
                <p class="card-text">Descripción de la tarjeta</p>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card card-horizontal">
              <img src="../../assets/panel/educacion-panel.png" class="card-img" alt="descripción de imagen" />
              <div class="card-body">
                <h3 class="card-title">
                  <a href="#" class="card-title-link">Título de la tarjeta</a>
                </h3>
                <p class="card-text">Descripción de la tarjeta</p>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card card-horizontal">
              <img src="../../assets/panel/educacion-panel.png" class="card-img" alt="descripción de imagen" />
              <div class="card-body">
                <h3 class="card-title">
                  <a href="#" class="card-title-link">Título de la tarjeta</a>
                </h3>
                <p class="card-text">Descripción de la tarjeta</p>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card card-horizontal">
              <img src="../../assets/panel/educacion-panel.png" class="card-img" alt="descripción de imagen" />
              <div class="card-body">
                <h3 class="card-title">
                  <a href="#" class="card-title-link">Título de la tarjeta</a>
                </h3>
                <p class="card-text">Descripción de la tarjeta</p>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card card-horizontal">
              <img src="../../assets/panel/educacion-panel.png" class="card-img" alt="descripción de imagen" />
              <div class="card-body">
                <h3 class="card-title">
                  <a href="#" class="card-title-link">Título de la tarjeta</a>
                </h3>
                <p class="card-text">Descripción de la tarjeta</p>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card card-horizontal">
              <img src="../../assets/panel/educacion-panel.png" class="card-img" alt="descripción de imagen" />
              <div class="card-body">
                <h3 class="card-title">
                  <a href="#" class="card-title-link">Título de la tarjeta</a>
                </h3>
                <p class="card-text">Descripción de la tarjeta</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="container py-4 pt-md-4 pb-md-5 mt-md-2">
        <h2 class="mb-3 mb-md-4">Noticias</h2>
        <div class="responsive-scroll vertical-cards-container" tabindex="0">
          <div class="card">
            <img class="card-img" src="../../assets/tarjetas/noticia-1.png" alt="descripción de imagen" />
            <div class="card-body">
              <div class="card-badges">
                <span class="badge badge-default">etiqueta</span>
              </div>
              <h3 class="card-title">
                <a href="#" class="card-title-link">La Ciudad inauguró una nueva sede del SAME</a>
              </h3>
              <p class="card-text"> Descripción del titular de una tarjeta con contenedor que
                puede contener hasta 2 líneas.</p>
              <div class="card-info">
                <div>
                  <small>
                    <span>Fecha de publicación: 22/04/2022</span>
                  </small>
                </div>
              </div>
            </div>
          </div>
          <div class="card">
            <img class="card-img" src="../../assets/tarjetas/noticia-2.png" alt="descripción de imagen" />
            <div class="card-body">
              <div class="card-badges">
                <span class="badge badge-default">etiqueta</span>
                <span class="badge badge-default">etiqueta</span>
              </div>
              <h3 class="card-title">
                <a href="#" class="card-title-link">Representaciones de la Ciudad acompañó las clínicas deportivas</a>
              </h3>
              <p class="card-text">Descripción del titular de una tarjeta con contenedor que
                puede contener hasta 2 líneas.</p>
              <div class="card-info">
                <div>
                  <small>
                    <span>Fecha de publicación: 21/04/2022</span>
                  </small>
                </div>
              </div>
            </div>
          </div>
          <div class="card">
            <img class="card-img" src="../../assets/tarjetas/noticia-3.png" alt="descripción de imagen" />
            <div class="card-body">
              <div class="card-badges">
                <span class="badge badge-default">etiqueta</span>
                <span class="badge badge-default">etiqueta</span>
              </div>
              <h3 class="card-title">
                <a href="#" class="card-title-link">El Registro Civil permite hacer trámites en forma 100% virtual</a>
              </h3>
              <p class="card-text">Descripción del titular de una tarjeta con contenedor que
                puede contener hasta 2 líneas.</p>
              <div class="card-info">
                <div>
                  <small>
                    <span>Fecha de publicación: 20/04/2022</span>
                  </small>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="pt-1">
          <a class="access" href="#" target="_blank" rel="noreferrer">
            Ver todas las noticias
          </a>
        </div>
      </div>
    </article>

    <section class="bg-light py-4 py-md-5">
      <div class="container">
        <h2 style="margin-bottom: 32px;">Información institucional</h2>
        <div class="row mb-4 mb-md-0 pb-2 pb-md-0">
          <div class="col-12 col-md-6 mb-2 mb-md-4 pb-2">
            <div>
              <h3 class="mb-1 h4">Matías Lanusse</h3>
              <p class="m-0">Director Ejecutivo</p>
            </div>
          </div>
          <div class="col-12 col-md-6 mb-2 mb-md-4 pb-2">
            <div>
              <h3 class="mb-1 h4">Contacto</h3>
              <p class="m-0">Teléfono: 48605200</p>
              <p class="m-0">Mail: comunicacion_agc@buenosaires.gob.ar</p>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-12">
            <h2 class="mb-3 mb-md-4">Redes sociales</h2>
            <div class="access-items-3">
              <div class="col">
                <a href="#" class="list-group-item">
                  <i class="bx bxl-facebook-circle o-icon"></i>
                  <div class="access-content">
                    <span class="access-title">Facebook</span>
                  </div>
                </a>
              </div>
              <div class="col">
                <a href="#" class="list-group-item">
                  <i class="bx bxl-instagram-alt o-icon"></i>
                  <div class="access-content">
                    <span class="access-title">Instagram</span>
                  </div>
                </a>
              </div>
              <div class="col">
                <a href="#" class="list-group-item">
                  <i class="bx bxl-twitter o-icon"></i>
                  <div class="access-content">
                    <span class="access-title">Twitter</span>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- OBELISCO SCCRIPTS -->
  <!-- OBELISCO SCCRIPTS -->
</body>
</html>

Navegación de pie de página