Notification

The notification component can be used at either the top of the page (below the VCU branding bar), the main content area or the sidebar. It should be used to draw the user's attention to something important.

On small screens the content in the notification will be center aligned. On larger screens content will be left aligned and wrapped in a container with a max-width of 1400px.

Requirements

Body

This is the general body of content for the notification. Your basic text based WYSIWYG type of content will generally look okay in this area. It is not recommended to insert images or blockquotes into the notification.

Theme

The notification component has the ability to display with a variety of background colors depending on the theme attribute. Carefully consider the theme of the notification based on the context of the content.

The associated icon that is displayed next to the title is defined by the notification's theme. Please only use icons defined in this framework.

Options

Notifications are configurable and provide additional options past the two required fields.

Compact

The notification component has the option to display in compact mode, which will reduce the font size and padding of the wrapping block.

Dismissable

Individual notifications have the option to be dismissable by the user. If this option is selected ensure you've added a specific id and the aria-expanded="false" attribute for each unique dismissable notification.

Dismissable javascript workflow

When a page that includes dismissable notifications is loaded, the aria-expanded="false" attributes on each notification are automatically toggled to aria-expanded="true" via the toggleNotificationDisplay() method, resulting in the user being able to interact with the notification content.

When a user dismisses a specific notification, a session based cookie will be set in the browser that corresponds to the notification's unique id with a value of 'false' via the setNotificationDismissedCookie() method. Additionally, the notification will have it's aria-expanded attribute toggled back to aria-expanded="false", resulting in the notification being hidden.

When the page is reloaded or a new page is navigated to, the notification javascript will again prepare to toggle all aria-expanded attributes to aria-expanded="true", but this time will only toggle notifications open that do not have a corresponding dissmissed cookie already set.

Notification cookies are good for the duration of a user's session and only correspond to that particular domain.

Stacked

The notification has an option to stack the title and body on top of each other instead of side by side. This option may be good for notifications that require long body or title content. To stack the notification add the .cwf-notification__container--row class to the .cwf-notification__container.

Title

The title is optional in notifications. If empty, the notification body will fill the rest of the space and no icon will be displayed.

T4 implementation

Notifications are implemented in T4 as the "Notification" plugin, meaning its classes are .plugin- prefixed instead of .cwf- prefixed.

Areas

This plugin can be used within the global "Site-Header", "Site-Sidebar", and "Site-Footer" sections to have it displayed globally within the header, sidebar, and footer areas respectively.

Injectors

In the "Injectors" field of the "Notification" plugin, the following injectors can be used:

• area:{sidebar} - Moves the card to the sidebar area (right of the main content).
• id:{custom_id} - Overrides the default, T4 ID of the notification with a custom ID.
• class:{custom_classes} - Adds custom classes to the notification.
• style:{custom_styles} - Adds custom styles to a style attribute of the notification.
• before:{custom_html} - Adds custom HTML before the notification.
• after:{custom_html} - Adds custom HTML after the notifcation.

Examples

Notifications come in five different themes: alert, success, info, primary and secondary.

Notifications have an option to allow users to dismiss notifications by clicking the close button.

Notifications have a compact option that will slightly alter the font-size and padding.

The content inside can be shown in a side by side (like above) or stacked.