Messages

Messages are used to present important information with emphasis. There are various types of messages that can be used, each of which is themed uniquely.

  <div class="m-message m-message--tip">
    <div class="m-message__heading">
      <span class="fas fa-info-circle"></span> Tip
    </div>
    <p>This is an example tip message</p>
  </div>
  <div class="m-message__footer">
    <button type="button" class="btn btn-sm btn-link">DISMISS</a>
  </div>
Tips

Tips are useful messages about helpful, but mostly optional things.

Tip

This is an example tip message

Warnings

Warnings are important informational messages that help prevent user error

Warning

This is an example warning message

Errors

Errors are messages indicating a failure or issue that has occurred and may impact the user

Error

This is an example error message

Success

Success messages provide info about positive effects of user actions.

Success

This is an example success message

Messages with Actions

Messages may provide actions, such as dismiss buttons, using the .m-message__footer element.

Tip

This is an example message