After a long period of testing, we have now updated the Alert ribbon component. Feedback from user tests and usage from several channels, showed us that purple as a colour was too loud.
We also saw that the description in Design Library generally was too confusing with information split between a component and a pattern. It's focused on the component now. And finally, there was a design synk between Bootstrap and Design Library which generated sensible updates for both.
See the full description for the details (measurements, colour codes, etc):
- There is a new alert state added, called "Success" (green). We have also stopped using purple for plain informative alerts because they felt too loud. Information alerts are now grey instead
- The names for states are now called:
- "Information" (grey, used to be "Whisper")
- "Success" (green, new state)
- "Warning" (yellow, used to be "Talk")
- "Critical" (red, used to be "Shout")
- If you need icons to highlight an alert, feel free to use the icons specificed in the Styles tab of the component page. Make them visible by using "Solid" FontAwesome icons.
- The measurements have been specified clearer and can also be found in the Styles tab.
Let me know if anything is unclear. Thank you!