Messages provide the user with contextual static information. They have a lower priority than an alert.


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.

This is a primary message
This is a secondary message
<div class="message message-primary">
  <i class="modus-icons notranslate" aria-hidden="true">info</i>This is a primary message
<div class="message message-secondary">
  <i class="modus-icons notranslate" aria-hidden="true">help</i>This is a secondary message