This is a success message on completion of an action.
This is an information-only message. No action required.

Messages and notifications


Standard inline messages

There are four categories of message: Error, Warning, Success and Information-only.

Usually they would appear at the top of the content, as they do here.

With JavaScript enabled, a close-button is added. When clicked, the message is set to display: none.


Messages with more content and links for testing purposes

Aut cumque consequuntur corporis excepturi ipsum porro quam fugiat aspernatur aut voluptatem quia ut. aspernatur corrupti ut quia quae eos sunt sit pariatur est eius et enim libero. ut aspernatur asperiores quo exercitationem iusto ad inventore enim consequatur. mollitia facilis tempora nulla. doloribus aliquid qui ex dolorum. et eum molestiae illo laboriosam tempora. nihil sit tempora ut Fugit amet eos nemo est porro culpa eligendi modi quis molestiae dolorem. repudiandae et blanditiis ratione ipsam et ea eligendi id dolores enim quidem hic. iure in dolorem nisi aliquid optio possimus molestiae praesentium ad qui

This is a success message on completion of an action. Aliquid cum fugiat dolor excepturi id consequatur aut molestiae at voluptatem explicabo expedita vel quod Itaque sit rerum aliquid cumque iure beatae illum corrupti ducimus qui quisquam expedita libero est. animi et ut voluptas. eaque ipsam in consectetur omnis dolores nemo facere deleniti et porro aliquam qui. voluptatem aperiam voluptates rerum provident et qui aspernatur itaque voluptatem ea. numquam et officia sint est nam nihil aperiam incidunt voluptatem nobis quo soluta possimus. odio vel consequatur eos blanditiis quasi sunt non debitis nisi similique. tenetur et consequatur iste eos repellat sunt quia consequatur omnis quibusdam enim
This is an information-only message. No action required. Suscipit minus natus porro maiores debitis nobis omnis occaecati illum hic soluta necessitatibus optio et molestiae repudiandae tenetur Qui maxime quo rem quis culpa ut quia praesentium dolorum in fuga. vitae quo consequatur vel maiores quis modi ratione et. quisquam quasi a enim qui consequuntur quis dolor nihil. in quae quis ex. eveniet et illo molestias eveniet corrupti eos consequatur aut voluptas. cum rem facere illum perferendis odit

Toast-style notifications

Non-modal notifications for administrative screens.

Ususally, messages would appear at the top of the page on a page refresh, or inline with the relevant content.
When the user is interacting with more complex pages which are being updated without a full page refresh, it might be more appropriate to display notifications in a popup at the top of the page. These are often referred to as toasts.

These are transitory messages, whcih disappear after a short period of time. They are JavaScript-only.

Examples

Usage

Trigger a toast notification using the following:

UCASDesignFramework.toast.information('Some sort of informational message.')

UCASDesignFramework.toast.success('Friendly success message.')

UCASDesignFramework.toast.warning('A supportive warning message.')

UCASDesignFramework.toast.error('If possible, we would avoid showing an error message.')

There are no other options, currently.

Clear all notifications using the following:

UCASDesignFramework.toast.clear()