There are several ways to show the change of state based on user interaction.


 On Hover

Cards are displayed in groups in their default status. Whenever it is intended to hover over a card, a simple effect is displayed such as change of color and width of the card to show the intended interaction.




Cards containing progress of activities shows the activities as a horizontal line. There are three types of showing progress

Normal – default

Active progress bar

When the application starts, the first icon in the progress bar turns orange initiating a start of the process.

In progress

The progress state is shown as a change to more prominent color in the progress bar.