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
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
Message with long email address for testing purposes
Privacy message
Custom icon
<!-- 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.
Inline messages
For example, a one-liner beneath some other text.
<!-- 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'})