Plantillas

Página simple

Las usamos para transmitir información estática de menor jerarquía, en comparación a una página de área, y con menor cantidad de contenido.

Acceder a la plantillaopen_in_new

Estructura general

En general, en página simple se organiza contenido informativo de forma detallada, sin que implique una acción por parte de la persona usuaria. Eventualmente, puede contener enlaces para redireccionar a otras secciones para que pueda realizar el trámite, inscribirse en el curso o reservar el turno.
Sus características admiten la convivencia de contenido variado, entre lo estático (texto, tablas) 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 combinar información textual (en formato párrafo y tabla) y sumar contenido enlazado como tarjetas y destacados.
  • Para organizar información y contenidos en otros formatos que no están contemplados en las otras plantillas del sistema Obelisco.

Cuándo no usar

  • Para informar sobre la gestión de un trámite, recomendamos usar la plantilla página de trámites.
  • Para agrupar información sobre un mismo tema en subtemas, en este caso recomendamos el uso de la plantilla de página libro.
Ejemplo de jerariquia de tarjetas

Estructura principal de la plantilla de página simple con el sistema de columnas visible.

Cuerpo de la página

Este es un módulo opcional para plasmar el contenido escrito de la página y aparece debajo del encabezado. Permite organizar la información y sumar recursos complementarios. Está compuesto por los siguientes elementos:

Elementos de párrafo

Opciones disponibles para redactar, estructurar y dar forma al contenido textual de la página simple:

  • Títulos y subtítulos que pueden ir de "Encabezado 2" a "Encabezado 6", utilizados para organizar y jerarquizar el contenido en secciones, especialmente en textos extensos.
  • Texto general para el desarrollo completo de la información. Permite aplicar estilos de formato como negrita e itálica para jerarquizar y destacar contenido relevante.
  • Enlaces, permite enlazar información complementaria sin extender el texto principal.
  • Listas simples con viñetas o numeración para organizar información, que puede incluir enlace. Las listas con viñetas se utilizan cuando los elementos no siguen un orden secuencial, mientras que las listas numeradas se emplean cuando existe un orden o secuencia definida.
  • Listas simples con enlaces, que pueden tener o no icono de descarga, para enlazar con otras pantallas y descarga de documentación.
Ejemplo de título y subtítulo

Componentes utilizados

Tabla

La tabla muestra datos organizados y estructurados en filas y columnas, para categorizar y comparar contenido relacionado.

Cuándo usar

  • Para mostrar contenido estructurado en columnas y filas.
  • Para comparar valores y reconocer patrones.
  • Para organizar gran volumen de información.

Cuándo no usar

  • Para mostrar contenido sin organización.
  • Para comunicar información no relacionada.
  • Para ordenar poca información, menor a dos líneas.

La tabla puede estar acompañada por un título y un párrafo de texto de dos líneas, que no deben ocupar más de 6 columnas de la grilla responsiva de nuestro sistema de diseño Obelisco.

Podés consultar la documentación de tabla para conocer más sobre el uso y variantes del componente.

Ejemplo uso de tabla

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.

Ejemplo uso de tarjetas

Variantes disponibles del componente Tarjetas para la plantilla de página simple.

Ejemplos de uso

Ejemplo uso de tarjetas
check

Recomendamos agrupar por categorías, temáticas, tipos de contenido, etc., el contenido de las tarjetas para facilitar la lectura y toma de decisión de la persona usuaria.

Ejemplo uso de tarjetas
close

Evitar combinar la disposición y/o los tipos de tarjetas dentro de un mismo grupo.

Tarjeta vertical

La variante disponible para este tipo de página incluye el tipo para cursos o talleres, de 4 columnas de ancho con imagen, etiqueta, título y bajada.

Elementos del componente:

  • Imagen multimedia.
  • Etiqueta: única donde se avisa si el curso o taller está abierto o cerrado para su inscripción.
  • Título descriptivo del curso.
  • Bajada con información complementaria como público, días y horarios de cursada.

En desktop, las tarjetas verticales de 4 columnas pueden agruparse hasta un máximo de 3 por línea.

Podés consultar la documentación de tarjetas para conocer más sobre el uso y variantes del componente.

Ejemplo uso de tarjetas verticales

Variante disponible del componente Tarjetas para curso o taller en la plantilla de página simple.

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.
Ejemplo uso de destacado

Variantes de accionables en el componente Destacado.

Ejemplos de uso

Ejemplo uso de destacado

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

Ejemplo uso de párrafo de texto
check

En la continuación de un párrafo de texto, recomendamos mantener la disposición de 8 columnas para ubicar las imágenes.

Ejemplo uso de párrafo de texto
close

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.

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.

Ejemplo uso de párrafo de texto

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.
Ejemplo de espaciados

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>Página Simple</title>

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

</head>

<body>
  <main id="main">
    <article class="pb-5 mb-4">
      <header class="bg-light pt-3 pb-5 mb-5">
        <div class="container pt-3 px-3 px-lg-0">
          <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="#">Formulario de postulación</a></li>
            </ol>
          </nav>
          <div class="row">
            <div class="col-12 col-xl-8">
              <div class="mt-2 pt-1">
                <h1 class="mb-3">Postulación a búsquedas activas</h1>
                <p class="lead">
                  Este formulario está destinado a personas interesadas en postularse a las búsquedas laborales abiertas
                  en el Gobierno de la Ciudad de Buenos Aires. Completarlo lleva entre 5 y 10 minutos.
                </p>
              </div>
            </div>
          </div>
        </div>
      </header>

      <div class="container">
        <div class="col-12 col-xl-8">
          <div class="mb-5">
            <h6 class="mb-3">Antes de empezar</h6>
            <ul class="list-informative-check mb-4">
              <li>Contá con el archivo de tu currículum vitae. </li>
              <li>Contá con el enlace a tu perfil en LinkedIn o portafolio web. </li>
            </ul>
            <div class="d-flex gap-2 mb-4">
              <span class="material-symbols-rounded text-info">info</span>
              <p>Todos los campos son obligatorios, salvo que estén marcados como opcionales.</p>
            </div>
          </div>

          <form id="formData">
            <!-- Datos personales -->
            <div class="mb-5">
              <h3 class="mb-1">Datos personales</h3>
              <hr class="mb-2 mt-0">
              <p class="text-md mb-4 pb-2">
                Información básica para poder identificarte y establecer contacto. Solo se utilizará con fines
                vinculados
                a
                las búsquedas laborales del GCBA.
              </p>
              <div class="d-flex flex-column gap-3">
                <!-- nombre y apellido -->
                <div class="row">
                  <div class="col-12 col-xl-8">
                    <div class="form-label-container">
                      <label for="fullname" class="form-label">Nombre y apellido</label>
                    </div>
                    <input type="text" class="form-control" id="fullname" name="fullname" />
                  </div>
                </div>
                <!-- nombre y apellido -->
                <!-- fecha de nacimiento -->
                <div class="row">
                  <div class="col-12 col-xl-4">
                    <div class="form-label-container">
                      <label for="date" class="form-label">Fecha de nacimiento</label>
                    </div>
                    <input type="date" class="form-control" id="date" name="date" aria-describedby="date-help" />
                  </div>
                </div>
                <!-- fecha de nacimiento -->
                <!-- documento -->
                <div class="row ">
                  <div class="col-12 col-xl-4">
                    <div class="form-label-container">
                      <label for="type_doc" class="form-label">Tipo de documento</label>
                    </div>
                    <select class="form-control form-select" id="type_doc" name="type_doc"
                      aria-label="Default select example">
                      <option selected disabled>Seleccionar…</option>
                      <option value="dni">DNI</option>
                      <option value="3">3</option>
                      <option value="4">4</option>
                      <option value="5">5</option>
                    </select>
                  </div>
                  <div class="col-12 mt-3 mt-lg-0 col-xl-6">
                    <div class="form-label-container">
                      <label for="nro_dni" class="form-label">Número de documento</label>
                    </div>
                    <input type="text" class="form-control " id="nro_dni" name="nro_dni" aria-describedby="Text"
                      placeholder="Texto" />
                    <p class="form-label-description">
                      Ingresá solo números, sin puntos ni guiones.
                    </p>
                  </div>
                </div>
                <!-- documento -->
                <!-- nro de telefono -->
                <div class="row">
                  <div class="col-12 col-xl-6">
                    <div class="form-label-container ">
                      <label for="nro_tel" class="form-label">
                        Número de teléfono
                      </label>
                    </div>
                    <input type="number" class="form-control " name="nro_tel" aria-describedby="Number"
                      placeholder="11 0000 0000" />
                    <!-- <div class="invalid-feedback">
                        <p>Los datos introducidos son inválidos.</p>
                      </div> -->
                    <p class="form-label-description">
                      Podés ingresar un número de línea o celular, con característica sin el 0 ni el 15.
                    </p>
                  </div>
                </div>
                <!-- nro de telefono -->
              </div>
            </div>
            <!-- Datos personales -->
            <!-- Información laboral y académica -->
            <div class="mb-5">
              <h3 class="mb-1">Información laboral y académica</h3>
              <hr class="mb-2 mt-0">
              <p class="text-md mb-4 pb-2">
                Contanos sobre tu formación y experiencia para poder conocer mejor tu perfil profesional.
              </p>
              <!-- Situación laboral actual -->
              <div class="row">
                <!-- Situación laboral actual -->
                <div class="col-12 col-xl-6">
                  <p class="headline-md  mb-4">Situación laboral actual</p>
                  <!-- input radios -->
                  <div class="form-radio">
                    <input class="form-radio-input" type="radio" name="profession" id="profession-radio-designer"
                      value="diseñador" checked />
                    <label class="form-radio-label" for="profession-radio-designer">
                      Trabajo en relación de dependencia
                    </label>
                  </div>
                  <div class="form-radio">
                    <input class="form-radio-input" type="radio" name="profession" id="profession-radio-freelance"
                      value="independiente" />
                    <label class="form-radio-label" for="profession-radio-freelance">
                      Trabajo de forma independiente
                    </label>
                  </div>
                  <div class="form-radio">
                    <input class="form-radio-input" type="radio" name="profession" id="profession-radio-none"
                      value="no_trabajo" />
                    <label class="form-radio-label" for="profession-radio-none">
                      No trabajo
                    </label>
                  </div>
                  <!-- input radios -->
                </div>
                <!-- Años de antigüedad -->
                <div class="col-12 mt-3">
                  <div class="row">
                    <div class="col-7 col-xl-4">
                      <div class="form-label-container">
                        <label for="anios_antiguedad" class="form-label">
                          Años de antigüedad
                        </label>
                      </div>
                      <input type="number" class="form-control" id="anios_antiguedad" name="anios_antiguedad"
                        placeholder="0" />
                    </div>
                  </div>
                </div>
              </div>
              <div class="row mt-4 pt-2">
                <div class="col-12">
                  <p class="headline-md mb-4">Situación académica actual</p>
                  <!-- selects -->
                  <div class="row mb-4 pb-2 flex-column">
                    <div class="col-12 col-xl-5">
                      <div class="form-label-container">
                        <label for="nivel_estudios" class="form-label">Nivel de estudios alcanzado</label>
                      </div>
                      <select class="form-control form-select mb-3" id="nivel_estudios" name="nivel_estudios">
                        <option value="Seleccionar">Seleccionar</option>
                        <option value="1">Opción</option>
                        <option value="2">Opción</option>
                        <option value="3">Opción</option>
                      </select>
                    </div>

                    <div class="col-12 col-xl-5">

                      <div class="form-label-container mt-3">
                        <label for="estado_actual" class="form-label">Estado actual</label>
                      </div>
                      <select class="form-control form-select mb-3" id="estado_actual" name="estado_actual">
                        <option value="Seleccionar">Seleccionar</option>
                        <option value="1">Opción</option>
                        <option value="2">Opción</option>
                        <option value="3">Opción</option>
                      </select>
                    </div>
                    <div class="col-12 col-xl-5">

                      <div class="form-label-container mt-3">
                        <label for="area_estudio" class="form-label">Área de estudio</label>
                        <span class="badge-forms badge-optional-forms">Opcional</span>
                      </div>
                      <select class="form-control form-select" id="area_estudio" name="area_estudio">
                        <option value="0">Seleccionar</option>
                        <option value="1">Opción 1</option>
                        <option value="2">Opción 2</option>
                        <option value="3">Opción 3</option>
                      </select>
                    </div>
                  </div>
                </div>
                <!-- selects -->

                <!-- input file -->
                <div class="mt-4 pt-2">
                  <div class="col-12 col-xl-8">
                    <div class="form-label-container">
                      <label for="curriculum_file" class="form-label">Cargá tu curriculum vitae</label>
                    </div>
                    <p class="form-label-description">
                      Subí un archivo de máximo 2MB en formato DOC o PDF.
                    </p>
                    <input type="file" class="form-control" id="curriculum_file" name="curriculum_file"
                      accept=".pdf,.doc,.docx" />
                  </div>
                </div>
                <!-- input file -->
              </div>
            </div>
        </div>
        <!-- Información laboral y académica -->
        <!-- Información adicional -->
        <div class="mb-5">
          <div class="col-12 col-xl-8 mt-3">
            <h3 class="mb-1">Información adicional</h3>
            <hr class="mt-0 mb-4 pb-2">
            <div class="row">
              <!-- Situación académica actual -->
              <div class="col-12 col-xl-10">
                <div class="form-label-container">
                  <label for="comentario" class="form-label">¿Querés contarnos algo más?</label>
                  <span class="badge-forms badge-optional-forms">Opcional</span>
                </div>
                <textarea class="form-control" id="comentario" name="comentario"
                  placeholder="¿Querés contarnos algo más?" maxlength="100" rows="5"
                  aria-describedby="TextArea"></textarea>
              </div>
              <!-- Situación académica actual -->
            </div>
          </div>
        </div>
        <!-- Información adicional -->
        <!-- condiciones legales -->
        <div class="col-12">
          <p class="text-md mb-4 pb-2">
            Al enviar el formulario, tu perfil se sumará a nuestra base de datos de búsquedas activas. <br>
            Recibirás un
            correo si tu perfil coincide con alguna convocatoria.
          </p>
          <div class="form-checkbox">
            <input class="form-checkbox-input" type="checkbox" name="ofertas" id="ofertas"
              value="Me interesa recibir nuevas ofertas laborales a mi casilla de correo electrónico." />
            <label class="form-checkbox-label" for="ofertas">
              Me interesa recibir nuevas ofertas laborales a mi casilla de correo electrónico.
            </label>
          </div>
          <div class="form-checkbox">
            <input class="form-checkbox-input" type="checkbox" name="terminos" id="terminos"
              value="Leí y estoy de acuerdo con las Políticas de privacidad." />
            <label class="form-checkbox-label" for="terminos">
              Leí y estoy de acuerdo con las <a href="">Políticas de privacidad</a>.
            </label>
          </div>
        </div>
        <!-- condiciones legales -->
        <button type="submit" class="btn btn-primary mt-4">Enviar postulación</button>
        </form>
      </div>
      </div>
    </article>
  </main>
</body>
</html>

Navegación de pie de página