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

Code reference

• Primary
• Alert
• Info
• Compact
• Dissmissable
• Stacked

When to use

Use the notification component when you want to draw users attention to urgent or high-priority information as soon as they land on your website or specific webpage. It also can be used for confirmation of user actions, such as a successful form submission.

It is important to consider whether your content warrants the use of a notification banner, or if the callout component is sufficient for a specific use case. The callout component also draws user attention to specific content, though more subtly, and is ideal for calls-to-action or important content such as contact information.

How to use

• Access t4.vcu.edu and navigate to the page you would like to update.
• Select the "Plugin - Notification" content type in T4.
• Select the notification's theme.
• Enter content into the "body" WYSIWYG (what you see is what you get) field.
• Select the combination of options you want for compact, dismissable and stacked variants.

Tips

• Avoid using headings, images and blockquotes in the notification body field.
• The notification will appear in the main body of the page by default. If you want the notification to appear in the sidebar use the area injector (area:{sidebar}).
• If you are using the notification in the sidebar, consider using the "stacked" option to vertically align content on top of each other.
• If you have a notification that needs to go on every page of the website, add the notification into the "Site-Header", "Site-Footer" or "Site-Sidebar" section of your site.
• Once closed, notifications that use the dismissable option will be visibly hidden from view for the duration of the user's browser session.

Requirements

The notification component must have a name, a theme and body content.

Accessibility considerations

It’s important to keep web accessibility standards in mind while creating notification content. This includes creating accessible links with contextual titles and using appropriate heading structures to ensure maximum readability for screen readers.