Components/Notifications

Notifications are used to relay information to the user about a situation or task that requires their input. They can notice and access the notifications by the bell icon in the shell bar on the top-right of the screen. In the notification popover, they take immediate action, navigate to the source of a specific notification or in the case of a notification group, they can sort the list items in various ways.

**Use notifications if:** * You want to make users aware of situations that require attention. * You intend to reduce the amount of information and actions to a minimum, but provide enough information to highlight the level of importance. **Use notifications if:** * You want to make users aware of situations that require attention. * You intend to reduce the amount of information and actions to a minimum, but provide enough information to highlight the level of importance.

Notification items display a container with: Avatar (optional): uses Avatar component, size XS Title (required): the title wraps up to two lines and then truncates. For unread title (renders with bold font-weight) use fd-notification__title--unread modifier class. Description (optional): the description wraps up to two lines and then truncates. Meta (optional): items separated by a span element with class fd-notification__separator. Items truncate if there's not enough space. In case Title or Description truncates in an ellipsis, the meta is followed by the text Expansion Trigger ("More" / "Less"). Priority Indicator (optional): the priority is displayed using Message and Status Icons. Object Status (optional): uses Inverted ObjectStatus / Tag (Horizon) - Inverted Object Status with icon, indication color: Second Color Set - Indication 2 - Red Actions (optional): include a "Close" and "Overflow" button (Transparent Button) actions.

You can display a group of notifications in a list format, and the user can sort them from the header. A Message Strip can be places after the group header. To load more notifications, the list can have a Growing Item placed at the bottom of the group.

Notifications can be displayed as banners in the top right corner. Apply the modifier class \