Messages and notifications

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

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

Libero totam veniam atque earum sequi consequatur qui occaecati adipisci molestias. omnis iure consequuntur quia alias non. a blanditiis in in quia dolore qui dolores deserunt voluptas dolorum qui in corrupti expedita. porro sed est ad est. eos eveniet ut ea rerum molestias. rerum dolor nihil nihil placeat possimus sit illo nulla dolorum. consectetur dicta necessitatibus odit quibusdam cum nihil corrupti Ea ut et nesciunt doloremque earum reiciendis accusamus atque dolorum reprehenderit sint et. adipisci aut quidem occaecati libero est voluptatem distinctio incidunt necessitatibus dolorem saepe ut voluptas qui. et aperiam doloremque non consequatur quaerat ipsam ea. ratione iste dolorem facilis repellat qui dolorem dolor id non molestiae harum consectetur. sapiente deserunt minima quo dolor fuga neque veritatis aut. ab praesentium deleniti quod facilis consequatur enim nobis minus quo. rerum sed iusto ut veritatis

This is a success message on completion of an action. Ipsa odit fugit maxime voluptatibus aut sunt expedita eos soluta Blanditiis inventore maiores reprehenderit rerum maiores explicabo dicta quaerat totam et modi nihil voluptatem incidunt. debitis voluptatem laboriosam pariatur. tempore et tempora excepturi rerum laboriosam sit amet qui voluptas eum omnis iure excepturi incidunt. rerum in quasi nisi repudiandae illum consequuntur ut laborum soluta corporis sit minus. eius facere odit quia sint rerum cum est error quia amet. repudiandae omnis est cumque dolores dolore autem
This is an information-only message. No action required. Animi quae quis aliquam mollitia enim qui ea ullam nulla Et aut excepturi voluptas ratione et consequatur odit quas inventore est id. ipsa voluptatem vel aut rerum iste deserunt et perspiciatis sint suscipit. dignissimos tenetur non ea et qui sit dolorem molestiae vero et commodi maxime id sit. quasi eum molestiae possimus quod vel

Message with long email address for testing purposes

Permissions for personwith.averylongemailaddress@mailinator.com have been updated.

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()