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

¿A qué llamamos calendario?

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. En este caso, se organiza un calendario con la visualización de los 12 meses del año, que puede contener referencias.

Cuándo usar

  • Para informar fechas sobre eventos o actividades agrupadas que ocurren durante el año.

Cuándo no usar

  • Para informar informar sobre una sola fecha relevante en el año, emplear en el caso de que se conozcan más de 3 fechas. En el caso de tener menos de 3 fechas relevantes, utilizar otros componentes como tarjetas.
Ejemplo de calendario

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

Componentes utilizados

Calendario

El calendario muestra los días del mes dentro de un año, se pueden marcar fechas en particular e incluir la referencia de la marca señalada.

Cuándo usar

  • Para señalar fechas de eventos, actividades de una institución u organismo durante el año.
  • Para indicar los días conmemorativos durante el año.

Cuándo no usar

  • Para mostrar menos de 3 fechas de eventos o actividades durante el año.
  • Para indicar menos de 3 fechas conmemorativas.
  • Para mostrar fechas no relacionadas.

Es conveniente que se muestren todos los meses del año, por más que no contengan fechas relacionadas indicadas.

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

Documentacion calendario

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 encabezado y el cuerpo de la página.
  • Espaciado horizontal de 32px: Entre cada uno de los componentes de calendario.
  • Espaciado vertical de 32px: Entre cada uno de los componentes de calendario.
Espaciado calendario
Espaciado calendario mobile

Para mantener una estructura clara, legible y alineada al sistema de grillas, recomendamos los siguientes espaciados entre secciones para dispositivos mobile:

  • Espaciado horizontal de 32px: Entre encabezado y el cuerpo de la página.
  • Espaciado vertical de 16px: Entre cada uno de los componentes de calendario.
<!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