Messages

Feedback, status and help messages are used to communicate with users after a task: to confirm that a task has been done, to tell that the platform is processing the task and needs a bit more time, to ask users to do the task one more time as the request couldn't be performed, to show users what actions can be done and where, or to indicate the state of a document. A feedback message is always a good way to show users what happened or what is happening: the content of the message is as important than the presence of the message itself. The fewer surprise there is during a process, the more intuitive the interface will be.

If you want to display a feedback message under a field in a form, use only the class of the message type.

Highlights in tables

To highlight elements in a cell, you can use the classes .label and .chip and add a secondary class depending of your needs.

.label label 1 .chip 1
.label-light label 1 .chip-light 1
.label-info label 2 .chip-info 2
.label-success label 3 .chip-success 3
.label-warning label 4 .chip-warning 4
.label-error label 5 .chip-error 5

Highlights in paragraphs

To highlight just a word or a sentence in a paragraph, here is a list of classes that you can use on inline elements like span tags.

.success Document unlocked
.avert Draft state
.warning Document locked
.error Document document

Feedback in pages

Feedback messages showing a global status are displayed in the top right corner of the window. We use the jquery.ambiance library. Use the .ambiance class and add a secondary class for the type of your message.

.infoFeedback
×
Your workspace is created
.successFeedback
×
Your task is achieved
.warningFeedback
×
The task will expired today
.errorFeedback
×
Invalid password
.neutralFeedback
×
A draft of this document has been saved.
Use draftDiscard draft

Feedback in forms

Feedback in forms will guide the user to fill a form. These messages are displayed once the form is validated.

.infoMessage
This field requires this.
.successMessage
Password validated.
.warningMessage
This field expects a date.
.errorMessage
This field is required.

Status messages

To display a feedback or status message, use status messages. They are helpful to tell users what and most of all to explain what is happening next. Define your message with a .processMessage div class, and add a secondary class to get the corresponding type of message.

.completeInfo
You process is launched.
.completeSuccess
Your process is complete.
.completeError
Your process contains an error.
.completeWarning
Your process has a warning state.
.running
Your process is running.
.scheduled
Your process is scheduled.

Specification, details and help messages

At last, some complementary classes are available to add a detail, make a field more explicit, or help users understand a specific action.

.detail
A detail under a field in a form
.emptyResult
There is no document like this here.
.specification
A specification paragraph, the default opening paragraph class
.widgetHelpLabel
Roll over this sentence!
A .tips class to use in a foldable box or a gadget
A .dropArea div to show users where to drop documents