This is an error message. Something has gone wrong and either action needs to be taken or the task cannot be completed at the current time.
This is a warning message. Something might not be quite right but the user needs to decide what to do next.
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 an error message. Something has gone wrong and either action needs to be taken or the task cannot be completed at the current time. Vero molestias nihil aut ut occaecati tempore praesentium dolorum qui inventore amet cum eius sunt nihil possimus delectus ullam molestiae Eveniet non magni eum eum ea est. illum qui est voluptates labore dignissimos suscipit cumque eveniet sit ratione rerum. est modi et sit eveniet totam consequatur sint aut ex nostrum perferendis saepe ut. commodi excepturi impedit officiis magni ratione dolores. consectetur rem unde reiciendis consectetur
This is a warning message. Something might not be quite right but the user needs to decide what to do next. Voluptates omnis sapiente aut eos nam commodi tempora quod ducimus et impedit vel asperiores exercitationem et laudantium eveniet velit Ea dolorem unde voluptas quisquam. sed autem labore maxime possimus hic accusamus ducimus quam. et corporis molestiae qui quod. non eum et nemo laboriosam facere est facere doloremque iusto. ipsum ullam eligendi corrupti molestiae laborum ipsa quidem mollitia cumque qui id culpa
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.')