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=“none”!
Demo
This warning message below has no header.
Markup
<div class="message message--info" data-header="Action Required">
<!-- Content goes here -->
</div>
<div class="message message--warning" data-header="none">
<!-- Content goes here -->
</div>