Estilos

Componentes

Formularios

Organismos

Lista de pasos

Las listas se utilizan para agrupar una serie de elementos relacionados. Para listas que presentan un orden secuencial de pasos, utilizamos la Lista de pasos.

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

Tamaños

Grande

  • Instrucción 1

    En esta descripción de la instrucción 1 se muestran los detalles principales de las acciones que deberá tomar el usuario luego. En esta descripción de la instrucción 1 se muestran los detalles principales de las acciones que deberá tomar el usuario luego.

  • Instrucción 2

    En esta descripción de la instrucción 2 se muestran los detalles principales de las acciones que deberá tomar el usuario luego. En esta descripción de la instrucción 2 se muestran los detalles principales de las acciones que deberá tomar el usuario luego.

  • Instrucción 3

    En esta descripción de la instrucción 3 se muestran los detalles principales de las acciones que deberá tomar el usuario luego. En esta descripción de la instrucción 3 se muestran los detalles principales de las acciones que deberá tomar el usuario luego.


<ul class="list-steps list-steps-lg">
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 1</h3>
    <p>
    En esta descripción de la instrucción 1 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego. En esta
    descripción de la instrucción 1 se muestran los detalles principales de
    las acciones que deberá tomar el usuario luego.
    </p>
  </li>
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 2</h3>
    <p>
    En esta descripción de la instrucción 2 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego. En esta
    descripción de la instrucción 2 se muestran los detalles principales de
    las acciones que deberá tomar el usuario luego.
    </p>
  </li>
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 3</h3>
    <p>
    En esta descripción de la instrucción 3 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego. En esta
    descripción de la instrucción 3 se muestran los detalles principales de
    las acciones que deberá tomar el usuario luego.
    </p>
  </li>
</ul>

Mediano

  • Instrucción 1

    En esta descripción de la instrucción 1 se muestran los detalles principales de las acciones que deberá tomar el usuario luego.

  • Instrucción 2

    En esta descripción de la instrucción 2 se muestran los detalles principales de las acciones que deberá tomar el usuario luego.

  • Instrucción 3

    En esta descripción de la instrucción 3 se muestran los detalles principales de las acciones que deberá tomar el usuario luego.


<ul class="list-steps">
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 1</h3>
    <p>
    En esta descripción de la instrucción 1 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego.
    </p>
  </li>
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 2</h3>
    <p>
    En esta descripción de la instrucción 2 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego.
    </p>
  </li>
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 3</h3>
    <p>
    En esta descripción de la instrucción 3 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego.
    </p>
  </li>
</ul>

Chico

  • Instrucción 1

    En esta descripción de la instrucción 1 se muestran los detalles principales de las acciones que deberá tomar el usuario luego.

  • Instrucción 2

    En esta descripción de la instrucción 2 se muestran los detalles principales de las acciones que deberá tomar el usuario luego.

  • Instrucción 3

    En esta descripción de la instrucción 3 se muestran los detalles principales de las acciones que deberá tomar el usuario luego.


<ul class="list-steps list-steps-sm">
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 1</h3>
    <p>
    En esta descripción de la instrucción 1 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego.
    </p>
  </li>
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 2</h3>
    <p>
    En esta descripción de la instrucción 2 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego.
    </p>
  </li>
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 3</h3>
    <p>
    En esta descripción de la instrucción 3 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego.
    </p>
  </li>
</ul>

Con borde

  • Instrucción 1

    En esta descripción de la instrucción 1 se muestran los detalles principales de las acciones que deberá tomar el usuario luego.

  • Instrucción 2

    En esta descripción de la instrucción 2 se muestran los detalles principales de las acciones que deberá tomar el usuario luego.

  • Instrucción 3

    En esta descripción de la instrucción 3 se muestran los detalles principales de las acciones que deberá tomar el usuario luego.


<ul class="list-steps list-steps-light">
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 1</h3>
    <p>
    En esta descripción de la instrucción 1 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego.
    </p>
  </li>
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 2</h3>
    <p>
    En esta descripción de la instrucción 2 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego.
    </p>
  </li>
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 3</h3>
    <p>
    En esta descripción de la instrucción 3 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego.
    </p>
  </li>
</ul>

Con número

  • Instrucción 1

    En esta descripción de la instrucción 1 se muestran los detalles principales de las acciones que deberá tomar el usuario luego.

  • Instrucción 2

    En esta descripción de la instrucción 2 se muestran los detalles principales de las acciones que deberá tomar el usuario luego.

  • Instrucción 3

    En esta descripción de la instrucción 3 se muestran los detalles principales de las acciones que deberá tomar el usuario luego.


<ul class="list-steps list-steps-numbers">
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 1</h3>
    <p>
    En esta descripción de la instrucción 1 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego.
    </p>
  </li>
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 2</h3>
    <p>
    En esta descripción de la instrucción 2 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego.
    </p>
  </li>
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 3</h3>
    <p>
    En esta descripción de la instrucción 3 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego.
    </p>
  </li>
</ul>

Con número y borde

  • Instrucción 1

    En esta descripción de la instrucción 1 se muestran los detalles principales de las acciones que deberá tomar el usuario luego.

  • Instrucción 2

    En esta descripción de la instrucción 2 se muestran los detalles principales de las acciones que deberá tomar el usuario luego.

  • Instrucción 3

    En esta descripción de la instrucción 3 se muestran los detalles principales de las acciones que deberá tomar el usuario luego.


<ul class="list-steps list-steps-numbers list-steps-light">
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 1</h3>
    <p>
    En esta descripción de la instrucción 1 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego.
    </p>
  </li>
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 2</h3>
    <p>
    En esta descripción de la instrucción 2 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego.
    </p>
  </li>
  <li class="list-steps-item">
    <h3 class="list-steps-item-title">Instrucción 3</h3>
    <p>
    En esta descripción de la instrucción 3 se muestran los detalles
    principales de las acciones que deberá tomar el usuario luego.
    </p>
  </li>
</ul>

Navegación de pie de página