Notification
Notification are a type of alert. Notifications succinctly message relevant information. They’re timely, easy to understand, and have a clear purpose. Be straightforward in tone and action to help guide people through.
On this page
Anatomy
Page Level Notifications
| Variation | Description | Required |
|---|---|---|
| Icon | The icon should help reinforce the sentiment behind the message. It also serves as an additional element to help support the overall meaning | Yes |
| Container | The overall container is horizontally and vertically elastic. | Yes |
| Background | The background color can help support the overall sentiment but it can not do that all on its own | Yes |
| Border | The border matches the overall message sentiment color | Yes |
| Heading | The heading text should be concise and meaningful to quickly allow the user to understand the general topic of the notification | No |
| Message | The message should be concise and direct in what the user should be aware of. Links can be placed anywhere within the message | No |
| Link | An additional stand alone link can be leveraged to help point users to a call to action. | No |
Component Level Notifications
| Variation | Description | Required |
|---|---|---|
| Icon | The icon should help reinforce the sentiment behind the message. It also serves as an additional element to help support the overall meaning | Yes |
| Container | The overall container is horizontally and vertically elastic. | Yes |
| Background | The background color can help support the overall sentiment but it can not do that all on its own | Yes |
| Border | The border matches the overall message sentiment color | Yes |
| Heading | The heading text should be concise and meaningful to quickly allow the user to understand the general topic of the notification | No |
| Message | The message should be concise and direct in what the user should be aware of. Links can be placed anywhere within the message | No |
| Link | An additional stand alone link can be leveraged to help point users to a call to action. | No |
Questions?
Connect with the DLS Team on Slack or by email.
Resources
Check out additional resources.