notifications

Notifications serve as a feedback & confirmation mechanism that comes in at the top right.
task notification: Call Two: Jane Johnson

About Notifications

The body of the notification is a clickable region that will prompt an additional browser tab with that record loaded and dismiss the notification. It is also dismissable by clicking the X icon.

Implementation Notes

The first three notifications that appear on the page should stack on one another. The fourth notification will show slightly beneath the third notification. Any subsequent notifications won't show until earlier notifications are dismissed.

Accessibility

Notifications should contain role="dialog" to signal to assistive technology that they require the user’s immediate attention.

Requirements

This notification will consist of the following:

  • Entity icon with background color
  • Subject field for the reminder
  • The time/date of when the event/task is occurring
  • An ‘X’ icon to dismiss the reminder

Base

event notification: Tesla - Renewal meeting
<div class="demo-only demo-only_viewport" style="height:4.5rem">
  <div class="slds-notification-container">
    <div aria-live="assertive" aria-atomic="true" class="slds-assistive-text">event notification: Tesla - Renewal meeting</div>

Examples

Task Notification

task notification: Call Two: Jane Johnson
<div class="demo-only demo-only_viewport" style="height:4.5rem">
  <div class="slds-notification-container">
    <div aria-live="assertive" aria-atomic="true" class="slds-assistive-text">task notification: Call Two: Jane Johnson</div>

Stacked Notifications

task notification: Call Two: Jane Johnson
<div class="demo-only demo-only_viewport" style="height:15rem">
  <div class="slds-notification-container">
    <div aria-live="assertive" aria-atomic="true" class="slds-assistive-text">task notification: Call Two: Jane Johnson</div>

Three Stacked Notifications

task notification: Call Two: Jane Johnson
<div class="demo-only demo-only_viewport" style="height:15rem">
  <div class="slds-notification-container">
    <div aria-live="assertive" aria-atomic="true" class="slds-assistive-text">task notification: Call Two: Jane Johnson</div>

Six Stacked Notifications

task notification: Call Two: Jane Johnson
<div class="demo-only demo-only_viewport" style="height:17rem">
  <div class="slds-notification-container">
    <div aria-live="assertive" aria-atomic="true" class="slds-assistive-text">task notification: Call Two: Jane Johnson</div>