Notification

Also known as: banner or alert

The notification component creates a colorful banner that can be used to visually distinguish urgent content or highlight responses to user actions.

Examples

When to use

The notification component is designed to:

• Highlight urgent information: Immediately draw attention to high-priority or time-sensitive content as soon as users land on your website or specific page.
• Confirm user actions: Provide feedback for successful actions, such as a form submission.

Consider using a notification banner for urgent messages or confirmations. If you need to subtly direct attention to important content or calls-to-action, the card component might be more appropriate.

How to use

• Access T4: Go to t4.vcu.edu and navigate to the page you wish to update.
• Select: Choose the “Plugin - Notification” content type.
• Theme: Select the appropriate theme for the notification.
• Content: Use the WYSIWYG (What You See Is What You Get) editor to input your notification message into the “body” field.
• Options: Select options for compact, dismissable, and stacked variants based on your needs.

Placing notification

• Default: Notifications appear in the main body of the page by default.
• Sidebar: To place a notification in the sidebar, use the area:{sidebar} injector. For vertical alignment in the sidebar, consider using the “stacked” option.
• Site-wide: To display a notification on every page, add it to the “Site-Header”, “Site-Footer”, or “Site-Sidebar” sections of your site.

Tips

• Content restrictions: Avoid using headings, images, and blockquotes in the notification body to maintain clarity and simplicity.
• Dismissable notifications: Notifications with the dismissable option will be hidden from view for the duration of the user’s browser session once closed.

Requirements

• Name: Provide a name for the notification component.
• Theme: To define the visual style.
• Content: The message or information to be displayed in the notification.

Accessibility considerations

Ensure all content in the notification component meets web accessibility standards.