When the system needs to inform the user of a given situation or state. It may include call to action, or the possibility do dismiss the message depending or it’s urgency.
It should be placed in the context of the scope of the message (global/page/module/widget).
When and how to use it
Messages are classified into 3 levels of severity
- Whisper: Used for informative guiding messages, sometimes proactive advice. Display colour is purple.
- Talk: A gentle warning, that you may disregard from, but it may influence the experience.. Display colour is yellow.
- Shout: A critical warning that you may not disregard, you will probably not be able to use the function. Display colour is red.
If the alert is something that can be “corrected” by the user, a button may be added to guide to that feature.
Do's and don'ts
- It can be used for displaying system states that will affect the usage of the site
- It can be used for proactive advices
- It may NOT be used as feedback to a user interaction
- 16px padding
- Top-left aligned text
- Icon from font awesome: exclamation-triangle. Icon is only used for Talk/shout as these are more critical.
- Button is optional and is a “ghost button”
- Button floats to the right
- May include a headline that is bold
- Ribbon fills the surrounding container 100% in width to the outmost border. Height is fluid depending on content
- Whisper: Purple Dark 1 (#4F2C99)
- Talk: Yellow Dark 1 (#FFB400)
- Shout: Red Dark 1 (#D81A1A)