Estilos

Componentes

Formularios

Organismos

Bloque de trámite

Este componente se utiliza dentro de una página informativa de trámite e indica el estado del mismo. Desde él, la persona usuaria puede iniciar el trámite o ver en qué instancia se encuentra.

Estamos actualizando todas las fichas de los componentes. Para conocer más sobre los lineamientos de uso del componente podés visitar la documentación en Obelisco v.1.

Predeterminado

Iniciá el trámite y completá todos los pasos

Iniciar trámite

<div class="block position-sticky" style="top: 48px;">
  <div class="block-body">
    <h2 class="block-title">Iniciá el trámite y completá todos los pasos</h2>
    <a
      href="#"
      target="_blank"
      rel="noopener noreferrer"
      class="btn btn-lg btn-primary btn-block"
    >
      Iniciar trámite
    </a>
  </div>
</div>

Con descripción

Iniciá el trámite y completá todos los pasos

Si tenés un trámite iniciado podés continuarlo desde acá.


<div class="block position-sticky" style="top: 48px;">
  <div class="block-body">
    <h2 class="block-title">Iniciá el trámite y completá todos los pasos</h2>
    <p class="block-text">
      Si tenés un trámite iniciado podés continuarlo desde acá.
    </p>
    <button type="button" class="btn btn-lg btn-primary btn-block">
      Iniciar trámite
    </button>
  </div>
</div>

Con barra de progreso

Este es tu progreso en el trámite

Continuar trámite

<div class="block position-sticky" style="top: 48px;">
  <div class="block-body">
    <h2 class="block-title">Este es tu progreso en el trámite</h2>
    <div class="progress">
      <div
        class="progress-bar bg-success"
        role="progressbar"
        aria-valuenow="25"
        aria-valuemin="0"
        aria-valuemax="100"
        style="width: 25%;"
      ></div>
    </div>
    <a
      href="#"
      target="_blank"
      rel="noopener noreferrer"
      class="btn btn-lg btn-primary btn-block"
    >
      Continuar trámite
    </a>
  </div>
</div>

Con fondo

Iniciá el trámite y completá todos los pasos

Si tenés un trámite iniciado podés continuarlo desde acá.


<div className="block position-sticky bg-light" style="top: 48px;">
  <div className="block-body">
    <h2 className="block-title">Iniciá el trámite y completá todos los pasos</h2>
    <p className="block-text">
      Si tenés un trámite iniciado podés continuarlo desde acá.
    </p>
    <button type="button" className="btn btn-lg btn-primary btn-block">
      Iniciar trámite
    </button>
  </div>
</div>

Variantes

Navegación de pie de página