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.
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.
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.
Notifications are configurable and provide additional options past the two required fields.
The notification component has the option to display in compact mode, which will reduce the font size and padding of the wrapping block.
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.
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.
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.
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
The title is optional in notifications. If empty, the notification body will fill the rest of the space and no icon will be displayed.
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.