Messages should be used within other elements to convey helpful information in an unobtrusive way.


To use a message, simply use the .message class followed by the appropriate .message-{theme-color} class to apply color. Use an appropriate icon before the text within a message to further convey meaning.

infoThis is a primary message
helpThis is a secondary message
<div class="message message-primary">
  <i class="modus-icons">info</i>This is a primary message
<div class="message message-secondary">
  <i class="modus-icons">help</i>This is a secondary message