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

Kit Digital de la Universidad San Sebastián

<section class="px-24 my-12 w-100">
  <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">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>