Lista de pasos
Sirve para acompañar de forma visual una secuencia de pasos. No tiene ninguna funcionalidad ni estados, sólo informa a la persona usuaria lo que sucederá llegada la instancia correspondiente de un proceso. Este componente tiene distintas variantes que se utilizan en función de las necesidades de jerarquía, contraste, dispositivo, y cantidad de pasos.
Tamaño
Hay tres tamaños de pasos: grande, mediano y chico. Todos los pasos deben tener el mismo tamaño para una lista cohesiva. Se puede optar por un tamaño a partir de variables como el espacio disponible en la página, jerarquía en relación con otros elementos, necesidad de contraste y accesibilidad.
- En desktop: el componente ocupa 8 columnas (712 px de ancho como máximo)
- En Mobile: el componente ocupa la totalidad de las columnas del dispositivo
Grande
Mediano
Chico
Estilo
Dentro de las variantes con número y sin número, existen pasos con relleno y con borde. El estilo por defecto es con relleno. En casos donde el fondo de la página es oscuro se recomienda el estilo con borde para dar contraste y más peso visual en relación al color de fondo.
Con relleno
Con borde
Con número
Los pasos existen en dos variantes principales: con número y sin número. Esta última se utiliza para reforzar visualmente la idea de un orden lógico secuencial para la persona usuaria. Cuando la cantidad de pasos es mayor a 9, se deben utilizar los pasos sin número.
Con número y relleno
Con número y borde
Sin línea
En el caso de tratarse del último paso de la lista, éste debe ir sin la línea unificadora.
Diseño y estructura (contexto de uso)
Para construir esta lista, cada componente de forma individual irá debajo de otro para visualizar esta progresión y así transmitir una secuencialidad.
