@ussebastian/kitdigital/docs/components/navigation/stepper.html

Kit Digital de la Universidad San Sebastián

<section class="w-100 my-12">
  <section class="d-none d-lg-block">
    <ul class="uss-stepper mb-40">
      <li class="uss-stepper__step stepper__step-check">
        <div class="uss-stepper__counter"></div>
        <div class="uss-stepper_head">
          <div class="uss-stepper__title">Título step</div>
          <div class="uss-stepper__description">Descripción</div>
        </div>
        <div class="uss-stepper__line"></div>
      </li>
      <li class="uss-stepper__step stepper__step-check">
        <div class="uss-stepper__counter"></div>
        <div class="uss-stepper_head">
          <div class="uss-stepper__title">Título step</div>
          <div class="uss-stepper__description">Descripción</div>
        </div>
        <div class="uss-stepper__line"></div>
      </li>
      <li class="uss-stepper__step stepper__step-active">
        <div class="uss-stepper__counter"></div>
        <div class="uss-stepper_head">
          <div class="uss-stepper__title">Título step</div>
          <div class="uss-stepper__description">Descripción</div>
        </div>
        <div class="uss-stepper__line"></div>
      </li>
      <li class="uss-stepper__step">
        <div class="uss-stepper__counter"></div>
        <div class="uss-stepper_head">
          <div class="uss-stepper__title">Título step</div>
          <div class="uss-stepper__description">Descripción</div>
        </div>
        <div class="uss-stepper__line"></div>
      </li>
      <li class="uss-stepper__step">
        <div class="uss-stepper__counter"></div>
        <div class="uss-stepper_head">
          <div class="uss-stepper__title">Título step click</div>
          <div class="uss-stepper__description">Descripción</div>
        </div>
        <div class="uss-stepper__line"></div>
      </li>
      <li class="uss-stepper__step">
        <div class="uss-stepper__counter"></div>
        <div class="uss-stepper_head">
          <div class="uss-stepper__title">Final</div>
          <div class="uss-stepper__description">Descripción</div>
        </div>
        <div class="uss-stepper__line"></div>
      </li>
    </ul>
    <ul class="uss-stepper uss-stepper--condensed">
      <li class="uss-stepper__step stepper__step-check">
        <div class="uss-stepper__counter"></div>
        <div class="uss-stepper_head">
          <div class="uss-stepper__title">Paso 1</div>
          <div class="uss-stepper__description">Lorem ipsum dolor sit amet...</div>
        </div>
        <div class="uss-stepper__line"></div>
      </li>
      <li class="uss-stepper__step stepper__step-active">
        <div class="uss-stepper__counter"></div>
        <div class="uss-stepper_head">
          <div class="uss-stepper__title">active</div>
          <div class="uss-stepper__description">Opcional</div>
        </div>
        <div class="uss-stepper__line"></div>
      </li>
      <li class="uss-stepper__step stepper__step-error">
        <div class="uss-stepper__counter"></div>
        <div class="uss-stepper_head">
          <div class="uss-stepper__title">Error</div>
          <div class="uss-stepper__description">Opcional</div>
        </div>
        <div class="uss-stepper__line"></div>
      </li>
      <li class="uss-stepper__step stepper__step-warning">
        <div class="uss-stepper__counter"></div>
        <div class="uss-stepper_head">
          <div class="uss-stepper__title">Advertencia</div>
          <div class="uss-stepper__description">Descripción</div>
        </div>
        <div class="uss-stepper__line"></div>
      </li>
      <li class="uss-stepper__step">
        <div class="uss-stepper__counter"></div>
        <div class="uss-stepper_head">
          <div class="uss-stepper__title">Final</div>
          <div class="uss-stepper__description">Datos</div>
        </div>
        <div class="uss-stepper__line"></div>
      </li>
    </ul>
  </section>
  <section class="d-lg-none">
    <div class="d-flex gap-16">
      <div class="block">
        <div class="uss-circle-progress" style="--progress: 20%">1/5</div>
      </div>
      <div class="block">
        <h5 class="mb-4">Información básica</h5>
        <p>Lorem ipsum dolor sit amet</p>
      </div>
    </div>
    <div class="d-flex gap-16">
      <div class="block">
        <div class="uss-circle-progress" style="--progress: 60%">3/5</div>
      </div>
      <div class="block">
        <h5 class="mb-4">Datos de contacto</h5>
        <p>Lorem ipsum dolor consectetur</p>
      </div>
    </div>
    <div class="d-flex gap-16">
      <div class="block">
        <div class="uss-circle-progress" style="--progress: 100%">5/5</div>
      </div>
      <div class="block">
        <h5 class="mb-4">Final</h5>
        <p>Lorem ipsum dolor sit amet, consectetur</p>
      </div>
    </div>
    <hr class="uss-divider" />
    <div class="my-40">
      <p>CONTENIDO</p>
    </div>
    <hr class="uss-divider" />
    <div class="flex flex-row justify-content-between gap-16 mb-16">
      <a href="#" class="uss-btn uss-btn--secondary btn--inline">
        <i class="uss-icon ri-arrow-left-circle-line"></i>
        Volver
      </a>
      <a href="#" class="uss-btn uss-btn--primary btn--inline">
        Siguiente
        <i class="uss-icon ri-arrow-right-circle-line"></i>
      </a>
    </div>
  </section>
</section>