Página de libro

Las usamos para agrupar información sobre un mismo tema en subtemas. Los índices y las subpáginas deben tener como mínimo 2 párrafos de 5 líneas de información.

Acceder a la plantillaopen_in_new

Encabezado

Se encuentra al comienzo de la página, justo debajo del componente Migas de pan. Su funcionalidad es brindar un pantallazo acerca de la página. Está compuesto por:

  • Título, obligatorio.
  • Bajada, opcional. Da más contexto sobre la página y se usa de apoyo al título.
  • Sección de redes sociales, opcional.
  • Línea divisoria, obligatoria.
Ejemplo encabezado de página libro

Navegación vertical

Contiene accesos directos a las distintas secciones de la página y señala en cuál se encuentra la persona usuaria, es obligatoria.

Ejemplo encabezado de página libro

Cuerpo de página

Contenido de la página. Está compuesto por secciones que pueden incluir:

  • Título, obligatorio.
  • Bajada, opcional. Brinda contexto sobre la sección y se usa de apoyo al título.
  • Enlaces, opcional.
  • Botones, obligatoria.
  • Imagen, opcional.
Ejemplo encabezado de página libro

Buenas prácticas

check

Se recomienda limitar la navegación vertical a un máximo de 10 opciones para evitar un scroll excesivo en la versión mobile.

Malas prácticas

close

En este tipo de páginas no se recomienda utilizar secciones de tarjetas, ni otros componentes que no estén especificados arriba.

Espaciado

Para mantener una estructura clara, legible y alineada al sistema de grillas, recomendamos los siguientes espaciados entre títulos, párrafos y accionables.

Ejemplo encabezado de página libroEjemplo encabezado de página libro
<!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>Página de libro</title>

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

</head>

<body>
  <main id="main">
    <article class="pb-5">
      <header class="pt-3 mb-2 d-flex">
        <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="#">Página anterior</a></li>
              </ol>
            </nav>
        </div>
      </header>
      <div class="container">
        <div class="row">
          <div class="col-12 col-xl-4">
            <div class="nav-container mb-5 mb-md-0">
              <nav aria-label="Navegación vertical">
                <ul class="nav flex-column nav-pills">
                  <li class="nav-item">
                    <a class="nav-link active" href="#"><span>Adultos y Adolescentes</span></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">
                      <span>Educación secundaria</span>
                    </a>
                    <ul class="nav flex-column nav-pills">
                      <li class="nav-item">
                        <a class="nav-link" href="#">
                          <span>
                            Adultos 2000
                          </span>
                        </a>
                      </li>
                    </ul>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#"><span>Supervisiones y sedes</span></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#"><span>Ventanilla Única de Adultos (VUA)</span></a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#"><span>Contacto</span></a>
                  </li><li class="nav-item">
                    <a class="nav-link" href="#"><span>Buscá tu escuela</span></a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
          <div class="col-12 col-xl-8">
            <div>
              <h1 class="mb-3">Adultos y Adolescentes</h1>
              <p class="lead">El área de Educación de Adultos y Adolescentes ofrece una variada oferta educativa para personas mayores de 14 o de 18 años. Además, de los espacios de educación formal (primaria y secundaria para adultos -CENS presencial, Adultos 2000 a distancia, Plan FINES-), el área brinda cursos que facilitan la inserción laboral.
              </p>
            </div>
            <div class="d-flex flex-row pt-3">
              Compartir en redes
              <ul class="list-inline ms-2">
                <li class="list-inline-item me-1">
                  <a href="#" target="_blank" class="d-inline-flex text-decoration-none">
                  <i class='bx bx-sm bxl-facebook-circle'></i></a>
                </li>
                <li class="list-inline-item me-1">
                  <a href="#" target="_blank" class="d-inline-flex text-decoration-none">
                  <i class='bx bx-sm bxl-instagram'></i></a>
                </li>
                <li class="list-inline-item me-1">
                  <a href="#" target="_blank" class="d-inline-flex text-decoration-none">
                  <i class='bx bx-sm bxl-twitter'></i></a>
                </li>
                <li class="list-inline-item me-1">
                  <a href="#" target="_blank" class="d-inline-flex text-decoration-none">
                  <i class='bx bx-sm bxl-linkedin-square'></i></a>
                </li>
              </ul>
            </div>
            
            <hr class="my-5" />

            <section>
              <h2 class="mb-4">Educación Primaria para Adultos</h2>
              <p class="mb-4">Tiene como finalidad brindar la oportunidad de finalizar los estudios primarios a personas mayores de 14 años, a través de diferentes modalidades y programas:
              </p>
                <div class="list-link" >
                  <a href="#" target="_blank" rel="noopener noreferrer">Centros Educativos de Nivel primario (CENP)</a>
                  <a href="#" target="_blank" rel="noopener noreferrer">Programa de Alfabetización, Educación Básica y Trabajo - (PAEBYT)</a>
                  <a href="#" target="_blank" rel="noopener noreferrer">Listado supervisiones terminalidad primaria para adultos</a>
                </div>
                <a href="#" class="btn btn-primary mt-4 mb-5">Conocer más</a>
                
                <h2 class="mb-4">Educación Secundaria para Adultos</h2>
                <p class="mb-4">Tiene como finalidad brindar la oportunidad de retomar y finalizar los estudios secundarios a personas mayores de 18 años. Existen diferentes alternativas y modalidades:
                </p>
                <div class="list-link" >
                    <a href="#" target="_blank" rel="noopener noreferrer">Centros Educativos de Nivel Secundario (CENS, presencial)</a>
                    <a href="#" target="_blank" rel="noopener noreferrer">Adultos 2000 (A distancia)</a>
                    <a href="#" target="_blank" rel="noopener noreferrer">FINES (Plan de Finalización de Estudios Secundarios)</a>
                    <a href="#" target="_blank" rel="noopener noreferrer">UGEE - BACHIS</a>
                </div>
                <a href="#" class="btn btn-primary mt-4 mb-5">Conocer más</a>

            </section>
          </div>
        </div>
      </div>
    </article>

  </main>
</body>
</html>

Navegación de pie de página