Alerts
Alerts inform users about a task, action or status. They can contain critical information, require decisions, involve multiple tasks and intend to solve problems. Alerts are purposefully interruptive, so they should be used sparingly.
On This Page
General Alerts
Alert Types
Basic
- Banner
- background-color: Gray B
- border-radius: 4px
- Icon
- font-face: FontAwesomePro-Light
- font-size: 20px
- line-height: 40px
- text-color: white
- unicode: f013
- Text
- style: Small Bold Paragraph
- color: white
With Messaging
- Banner Top
- background-color: Gray B
- border-radius: 4px 4px 0 0
- Icon
- font-face: FontAwesome5ProSolid
- font-size: 20px
- line-height: 28px
- text-color: White
- code: f0f3
- Text
- style: Small Bold Paragraph
- color: white
- Banner Bottom
- background: White
- border: 2px solid
- border-color: Gray B
- border-radius: 0 0 4px 4px
- Text
- style: Small Paragraph
- color: Gray A
Additional States
Success
Caution
- Color
- Green
- Icon
- code: check-circle (f058)
- Color
- Yellow
- Icon
- code: exclamation-triangle (f071)
General Notification Alt Color
Error
- Color
- Blue
- Icon
- code: bell (f0f3)
- Color
- Red
- Icon
- code: exclamation-circle (f06a)
In-Page Alerts
Alert Types
Basic
- Banner
- background-color: Gray E
- background-opacity: 20%
- radius: 4px
- Icon
- ffont-face: FontAwesome5ProSolid
- font-size: 20px
- line-height: 28px
- text-color: Gray A
- code: bell (f0f33)
- Text
- style: Small Paragraph
- color: Gray A
Alert Types
Full Width
- Banner
- border-radius: none
Additional States
Success
Caution
- Banner
- color: Success
- Icon
- code: check-circle (f058)
- color: Success
- Banner
- color: Warning
- Icon
- code: exclamation-circle (f06a)
- color: Warning
General Notification Alt Color
Error
- Banner
- color: Aqua
- Icon
- code: bell (f0f3)
- Banner
- color: Error
- Icon
- code: exclamation-triangle (f071)