While icons does convey things very easily to the user, it will be great if we can do below things to convey more in depth status to the user
Club 2 icons in to one. I.e. Primary and Secondary
Apply a background color to Primary and Secondary
Let’s say we need to let the user know that there is a call in progress and its currently kept on hold. If we convey the same using a text it will not be a great user experience and will occupy more real estate on the screen.
Instead if we can show that in a single icon as below that can save us lot of real estate on the screen and also does give the user a great and appealing user experience.
Let’s go ahead and learn how to build such icon (Let’s say to denote Chat on Hold) in Pega using CSS
We need to add 3 blocks of CSS Code to a CSS rule to design the icon as above