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

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. Sed consequat dui sed arcu volutpat rutrum <a href="">dolor sit amet consectetur adipiscing</a> Suspendisse felis diam, efficitur sit amet mi eu, ullamcorper scelerisque diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur leo dui, tincidunt hendrerit dui vel, dignissim varius augue. Duis tellus dolor, varius sit amet pellentesque sit amet, porta at tellus. Duis dignissim bibendum eleifend. Praesent sagittis dolor at maximus lobortis. Proin ac turpis sem. Aliquam lacinia fermentum mauris, sit amet posuere risus rutrum at. Donec elementum augue feugiat erat vulputate vestibulum. Curabitur aliquam, mi luctus pulvinar sodales, tortor elit commodo odio, eget sollicitudin lectus mauris nec quam. Aliquam erat volutpat. Sed at venenatis tellus, in egestas magna. Pellentesque tempor, enim eget dapibus pharetra, ante leo molestie lacus, a interdum lacus elit sed sem. Proin vel quam eget sapien tempus dictum eget a augue. In bibendum leo quis massa finibus congue. In eget orci nec ipsum tincidunt ornare.</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 (deprecated)

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.

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.')

UCASDesignFramework.toast.clear()

Toast-style notifications using UCASDesignFramework.messages

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

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

UCASDesignFramework.messages.destroyAll()

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

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

Slider notifications

Show a slider

This is a no-JS notification that slides in from the side at desktop sizes after a short delay, but remains inline at smaller sizes.

If it contains interative elements, it should be placed in the DOM so that it will be the next item to receive focus.

<!-- START message-slider component -->
<div class="message message--slider message--success message--static">
  <h2 class="message__header font-yard">Etiam eleifend nulla sed urna vulputate, ac venenatis nibh ornare</h2>
  <div class="message__content">
    <button class="button button--small button--primary">Amet consectetur adipiscing elit</button>
  </div>
</div>
<!-- END message-slider component -->

It is important that it is placed into an existing container with role="status" so that NVDA reads out the message when it is added.

<div class="messages-container" role="status"><!-- It is important that this container exists before the message is added so that NVDA reads out the message. --></div>

<!-- START message-slider component -->
<div class="message message--slider message--success message--static">
  <h2 class="message__header font-yard">Etiam eleifend nulla sed urna vulputate, ac venenatis nibh ornare</h2>
  <div class="message__content">
    <button class="button button--small button--primary">Amet consectetur adipiscing elit</button>
  </div>
  <button class="button button--close">Ipsum dolor sit</button>
</div>
<!-- END message-slider component -->