Feedback Elements

Feedback blocks

Feedback block & combo button

Feedback blocks are used to provide action-based feedback messages or to convey informational and/or critical account-related messages.

Feedback messages are categorized into four types based on severity:

  • Success: indicates that an action processed successfully or that there are no account-related issues. The success helper class gives this block its green color.
  • Warning: indicates that an action failed at this time that otherwise would be processed correctly. If the message is related to an account status then campaign sending ability might be affected to some extent. Use the warning class for the yellow background color.
  • Error: indicates that an action failed completely. If the message is related to an account status then the campaigns will definitley not send. Use the error class for the red background color.
  • Info: just provides information related to a performed action. Use the info class for the blue background color.

These blocks are built around a standard media block and show an icon relative to their severity. For Freddicons add v-isFreddicon to the c-mediaImage container to get the alignment right.

Flash blocks

  • Info message
  • Error message
  • Success message

Use v-flashBlock--info, v-flashBlock--error and v-flashBlock--success for background color based on message type. The color convention is the same as that of feedback blocks—blue for info, red for error and green for success.

Badges

Success Warning Error Information New! Base

Badges are used as a form of inline feedback and labeling. They are typically used to provide additional context to components already on the page.

Toaster messages

Toaster messages are shown at the bottom-left of the page and stay for ~2 seconds, providing immediate feedback in response to a user action.

These are most usually generated through JS or PHP.

Callout Tips

This is a tip with a single column. It will automatically have .readable-max-width applied, so no need to worry that it will get too big for its britches. That's why it doesn't go all the way to the edge like its columned brethren below.
Two columns. These will have the class .flex-half applied to them automatically.
Two columns. These will have the class .flex-half applied to them automatically.

Defaults to yellow light-bulb freddicon and single column. To manually set columns, use data-dojo-props="columns: 12". To manually set the freddicon, use data-dojo-props="icon: 'icon-name'".

If you need a full-width single column with centered text in the middle, use data-dojo-props="columns: '1 centered'". All the options.

Progress Dots

Defaults to three steps with the first step being active. To manually set the number of steps, use data-dojo-props="stepNum: 5". To manually set the starting active step, use data-dojo-props="activeStepIndex: 4".