Progress Block
Progress block is progress trackers (or progress indicators) display progress through a sequence by breaking it up into multiple logical and numbered steps. They guide the user through a number of steps in order to complete a specified task.
Example:
Brainstorming
This is where we sit down, grab a cup of coffee and do some brainstorming.
Research
Now that we've have some ideas, it's time to research.
Design
We begin to visualize concepts and dive into details.
Release
Your product is all dressed up and ready to go, it's time to release.
Example #2:
Following example uses .bg-primary-light, .brd-primary-light, etc. classes to specify colors for the specific progress block elements. To change the color of the block elements change -primary- part of the class name to either -highlight-, -standout-, or -secondary-.
Step 1
This is where we sit down, grab a cup of coffee and do step 1.
Step 2
Now that we've have some ideas, it's time for step 2.
Step 3
We begin to visualize concepts and dive into step 3.
Step 4
Your product is all dressed up and ready to go, it's time to do step 4.