Component Blueprints
Notifications
- HTML/CSS:Dev Ready
- Layout:Desktop Only
Sections
information
You are currently viewing a sandbox preview version of Spring ’20 | Go back to Summer ’20
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 toassistive 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>
<section class="slds-notification" role="dialog" aria-labelledby="noti52" aria-describedby="dialog-body-id-5">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>
<section class="slds-notification" role="dialog" aria-labelledby="noti77" aria-describedby="dialog-body-id-8">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>
<section class="slds-notification" role="dialog" aria-labelledby="noti77" aria-describedby="dialog-body-id-13">Three Stacked Notifications#
<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>
<section class="slds-notification" role="dialog" aria-labelledby="noti77" aria-describedby="dialog-body-id-21">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>
<section class="slds-notification" role="dialog" aria-labelledby="noti77" aria-describedby="dialog-body-id-36">Overview of CSS Classes#
- Selector
- The CSS class being referred to.
- Summary
- A description of what the class does.
- Support
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- Restrict
- The selector that the class name is allowed to be used on.
- Variant
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- Modifier
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.
| Selector | .slds-notification |
|---|---|
| Summary | |
| Support | dev-ready |
| Restrict | .slds-notification-container section, .slds-notification-container div |
| Variant | True |
| Selector | .slds-notification__body |
|---|---|
| Summary | The body of the notification |
| Restrict | .slds-notification div |
| Selector | .slds-notification__target |
|---|---|
| Summary | Main reminder component |
| Restrict | .slds-notification__body a |
| Selector | .slds-notification__close |
|---|---|
| Summary | Notification close button |
| Restrict | .slds-notification__body button |
| Selector | .slds-notification__footer |
|---|---|
| Summary | Optional notification footer |
| Restrict | .slds-notification div |