Alerts

To show an alert use the class m-alert and add a modifier to specify the type of alert:

• -banner
• -bubble
• -toast

and also the style of the alert must be specified:

• -light
• -success
• -danger
• -warning
• -info
• -dark

Example

<div class="m-alert -banner -info" data-title="Banner title">
  This is a banner example
</div>

Also can show an icon to emphasize more the type of nature applying the modifier -hasIcon.

<div class="m-alert -banner -info -hasIcon" data-title="Banner title">
  This is a banner example
</div>

A button can be added to force the user to close the alert.

<div class="m-alert -banner -info -hasIcon" data-title="Banner title">
  This is a banner example
  <button></button>
</div>

Also alerts supports size modifiers:

• -small
• -large

<div class="m-alert -banner -info -small" data-title="Banner title">
  This is a banner example
  <button></button>
</div>