Notification GroupNew
Notification group is used to position and style a group of notifications.
<nord-notification-group>
<nord-notification>
<h2>Patient arrived</h2>
<p>Ariel Salminen arrived to clinic with Pixie cat.</p>
<a href="#">Start consultation</a>
</nord-notification>
<nord-notification>
<h2>New feature available</h2>
<p>We’ve introduced a quick way to navigate between app views, actions, and more using a new command menu.</p>
<a href="#">Read more</a>
</nord-notification>
</nord-notification-group>
<script>
const group = document.querySelector("nord-notification-group")
group.addEventListener("dismiss", e => e.target.remove())
</script>Slots
| Slot name | Description |
|---|---|
| Default slot | Default slot in which to place notifications. |
Usage #
This section includes guidelines for designers and developers about the usage of this component in different contexts.
Do #
- Use in combination with Notification so that notifications get styled and positioned correctly.
- Add as close to the start of your main content area as possible.
Don’t #
- Don’t use for grouping anything other than notification components
Content guidelines #
Notification content should be clear, accurate and easy to understand:
When writing the notification content, be concise. Keep content to 1 to 2 sentence:
When writing the notification content, always write it in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):
Always end in punctuation:
Action link labels in notifications should be clear, accurate and predictable. It should be possible for the user to understand what will happen when they click a button:
When writing action link labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):
Avoid unnecessary words and articles in action link labels, such as “the”, “an” or “a”:
Integration
For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.
Troubleshooting
If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.