Process
The Process module is used to visually represent a sequence of steps or stages in a process or workflow. It helps users easily follow the progression of tasks or actions, often with the use of numbered steps, icons, or progress indicators. The Process module can be customized to fit various design styles and is perfect for guiding users through multi-step tasks or processes. Add a container element with the
.process class and add child elements with the .item class. Also through the .active or .failed class will be highlighted items and indicate the current state of process.
Failed Process
Vertical Process
Also, just add the .vertical class to .process to make it vertical style.
Vertical style is also used for mobile devices.
Reversed Vertical Process
And also, you can reverse the items of process using by .reversed class.
| Default Class Name | Combinators |
|---|---|
process |
.process |
item |
.process .item |
active |
.process .active.item |
failed |
.process .failed.item |
| Positions | Combinators |
vertical |
.vertical.process |
reversed (only for vertical position) |
.reversed.vertical.process |
| Styles | Combinators |
success |
.success.process |
warning |
.warning.process |
error |
.error.process |
dark |
.dark.process |