Messages

message

Messages can be used to display important information that will stand out on the screen.

Demo

Markup

<div class="message message--info">
<!-- Content goes here -->
</div>
<div class="message message--warning">
<!-- Content goes here -->
</div>
<div class="message message--success">
<!-- Content goes here -->
</div>
<div class="message message--error">
<!-- Content goes here -->
</div>
You can add a custom heading to any message using data-header="{Your Heading}". You can also remove the heading by setting data-header=""!