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.

Si quieres conocer las buenas prácticas de uso del componente, puedes visitar el siguiente enlace.

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>

Navegación de pie de página