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

Et mollitia aut ipsam beatae nisi maxime eum iure id. et quaerat voluptatem officiis saepe. et aperiam sed dolor aspernatur magnam quisquam quis quas Est aperiam eos facere dolores magni quasi possimus incidunt id minus libero nam nam. et sunt ex modi itaque aliquid laborum quia excepturi provident fuga sed quia repudiandae. perferendis laboriosam repudiandae nesciunt fugit veniam. voluptas minus hic cumque sit sapiente neque. consequatur rerum eos est ut placeat quia libero nobis quibusdam architecto voluptatem omnis voluptates maxime. blanditiis laudantium occaecati quas incidunt exercitationem enim iure iste unde occaecati

This is a success message on completion of an action. Fuga ut ea non consequatur deserunt sit velit earum Excepturi aliquid aut tempore. est dicta laborum dolor et et culpa. mollitia ratione et reprehenderit cumque vel quis minima sed numquam officiis
This is an information-only message. No action required. Vero animi facere error deleniti aliquid rerum corrupti reiciendis sed voluptas Vero dolores et et incidunt dolore et quos quis nihil soluta eos alias rerum. sed incidunt magnam voluptates adipisci nisi saepe omnis. officia possimus debitis in odit nesciunt quisquam quia sunt reprehenderit rerum soluta incidunt rerum

Message with long email address for testing purposes

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

Privacy message

Your data is safe with us and we never pass your details to third parties for marketing purposes without your permission.

You can change your mind and update your personal details and preferences at any time. For more information on how we treat your personal data, including how to opt out, take a look at our privacy policy

Custom icon

This is an information-only message. No action required. Eaque numquam ipsum laborum minima autem qui explicabo quis Rem ut beatae ratione ipsa. ut at mollitia quia tempora. voluptatem sit impedit nesciunt aliquid pariatur vitae necessitatibus ut. enim quia non minima. temporibus incidunt eos ea earum voluptatibus sed eligendi distinctio. quos et quaerat pariatur nostrum vitae velit pariatur temporibus. aut tenetur dolores ut
This is an information-only message. No action required. Excepturi itaque repellat est adipisci vitae asperiores nostrum blanditiis modi enim Neque atque fugiat tempora quis. vel veritatis aut a id cum. voluptatem quia omnis sunt asperiores et suscipit ut in culpa vel ab voluptatum pariatur. dolores totam veniam magnam doloribus iste vero qui explicabo qui ut
<!-- START message-information component -->
<div class="message message--information icon--calendar-light">
    <div class="message--content" role="status">This is an information-only message. No action required. Cumque ut quasi dignissimos quia et et cumque est et iure consequuntur inventore minima <a href="">inventore non est nihil delectus</a> Molestiae ullam ea deleniti sint quia et aut est culpa ipsum ab necessitatibus non. voluptatem numquam et aut sit sed animi aut quo eum omnis. fuga numquam nihil corrupti qui et minus neque. et consequatur sed blanditiis et et dolores numquam dignissimos rerum reiciendis omnis eum tempora. dolorum eligendi perferendis non esse nihil quis magni. quidem aut maiores pariatur modi aut expedita enim ad aperiam dicta dolore velit. iure ut unde repellendus temporibus quo odit sunt aut</div>
</div>
<!-- END message-information component -->

Message with meta

Static message (no close icon)

Add the class message--static to remove the close icon.

This is a message without a close button

Inline messages

For example, a one-liner beneath some other text.

Lorem ipsum dolor sit
Lorem ipsum dolor sit
Lorem ipsum dolor sit
Lorem ipsum dolor sit
<!-- START inline-message component -->
<div class="inline-message inline-message--info icon-inline--left icon--alert-circle-denim">Lorem ipsum dolor sit</div>
<!-- END inline-message component -->
<!-- START inline-message component -->
<div class="inline-message inline-message--error icon-inline--left icon--alert-circle-monza">Lorem ipsum dolor sit</div>
<!-- END inline-message component -->
<!-- START inline-message component -->
<div class="inline-message inline-message--warning icon-inline--left icon--alert-circle-sun">Lorem ipsum dolor sit</div>
<!-- END inline-message component -->
<!-- START inline-message component -->
<div class="inline-message inline-message--success icon-inline--left icon--success">Lorem ipsum dolor sit</div>
<!-- END inline-message component -->

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

Toast-style notifications using UCASDesignFramework.messages

Examples

Trigger a message using the following:

UCASDesignFramework.messages.create({message: 'Some sort of informational message.'})

UCASDesignFramework.messages.create({message: 'Friendly success message.', type: 'success'})

UCASDesignFramework.messages.create({message: 'A supportive warning message.', type: 'warning'})

UCASDesignFramework.messages.create({message: 'If possible, we would avoid showing an error message.', type: 'error'})

UCASDesignFramework.messages.create({
  message: 'Default options.',
  type: 'info',
  closeButton: true,
  deleteAfterClose: true,
  static: false,
  duration: 5000
})

The unique auto-generated ID of the message is returned.

Destroy a message using destroy and passing the ID:

UCASDesignFramework.messages.destroy('message-id')

Destroy all messages:

UCASDesignFramework.messages.destroyAll()

Add a custom ID by setting it in the params:

UCASDesignFramework.messages.create({message: 'Some sort of informational message.', id: 'my-lovely-id'})

Update a message by using create with the ID of the existing message:

UCASDesignFramework.messages.create({message: 'Updating this informational message.', id: 'my-lovely-id'})