Notifications

A component to easily alert users to new notifications.

Overview

The Notification Component provides an easy way to message the user when an action that is relevant to them happens within an application.

View all notificationsThomas Stephensadded a new comment to yourreview Just nowPraesent commodo cursus magna, vel…TSThomas Stephensadded a new comment to yourreview Just nowPraesent commodo cursus magna, vel…TSThomas Stephensadded a new comment to yourreview Just nowPraesent commodo cursus magna, vel…TSThe Notification component.

Usage

Only one Notification component should be used per page. It should exist in a fixed location throughout the application, in either the Sidebar or the Masthead.

Anatomy

2TriggerView all notificationsThomas Stephensadded a new comment to yourreview Just nowPraesent commodo cursus magna, vel…TSThomas Stephensadded a new comment to yourreview Just nowPraesent commodo cursus magna, vel…TSThomas Stephensadded a new comment to yourreview Just nowPraesent commodo cursus magna, vel…TS341NotificationsAll Notifications LinkThe Notification anatomy.

The Notification component has two main sections - the Trigger and the main Notification Sheet.

  1. Container. The container wraps the entire notification sheet. By default it is hidden.
  2. Trigger. The Trigger is the only part of the Notification Component that is visible by default. Clicking on it will trigger the Notification Sheet.
  3. Notifications. Each Notification provides an overview of the action involving the user.
  4. All Notifications. This link will navigate the user to a Notification screen.

Sizing & Spacing

The Notification is only available in 1 size. It is tied into the Masthead and the Sidebar, so cannot be used independently of these components.

States

View all notificationsThomas Stephensadded a new comment to yourreview Just nowPraesent commodo cursus magna, vel…TSThomas Stephensadded a new comment to yourreview Just nowPraesent commodo cursus magna, vel…TSThomas Stephensadded a new comment to yourreview Just nowPraesent commodo cursus magna, vel…TSThe Notification states.

The Notification Component has two states: hidden and visible. By default, the Notification Sheet is hidden - clicking on the Trigger will make the sheet appear besides the bell icon.

Hierarchy & Placement

The Notification Sheet should only be used in the Sidebar or Masthead.