Messages call attention to specific copy and status updates.
Standard Messages
Use .primary, .success, .warning, or .error classes to change the text color for various messages.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<p class="primary">Lorem ipsum...</p>
<p class="success">Lorem ipsum...</p>
<p class="warning">Lorem ipsum...</p>
<p class="error">Lorem ipsum...</p>
Status Highlights
Use .primary, .success, .warning, or .error -highlight classes to highlight text with status colors.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
<p><strong class="primary-highlight">Lorem ipsum</strong>...</p>
<p><strong class="success-highlight">Lorem ipsum</strong>...</p>
<p><strong class="warning-highlight">Lorem ipsum</strong>...</p>
<p><strong class="error-highlight">Lorem ipsum</strong>...</p>
Message Boxes
Appending -message will wrap the message in a box. Optionally, add .message-title to the headings for better formatting.
<div class="primary-message">
<h3 class="message-title">Lorem ipsum...</h3>
<p>Consectetur adipisicing...</p>
</div>
<div class="success-message">
<h3 class="message-title">Lorem ipsum...</h3>
<p>Consectetur adipisicing...</p>
</div>
<div class="warning-message">
<h3 class="message-title">Lorem ipsum...</h3>
<p>Consectetur adipisicing...</p>
</div>
<div class="error-message">
<h3 class="message-title">Lorem ipsum...</h3>
<p>Consectetur adipisicing...</p>
</div>
Inverse Colors
Adding .inverse-message to the message will make the background color darker and the text color white, which is great when used directly on the background instead of in a box.
<div class="primary-message inverse-message">
<h3 class="message-title">Lorem ipsum...</h3>
<p>Consectetur adipisicing...</p>
</div>
<div class="success-message inverse-message">
<h3 class="message-title">Lorem ipsum...</h3>
<p>Consectetur adipisicing...</p>
</div>
<div class="warning-message inverse-message">
<h3 class="message-title">Lorem ipsum...</h3>
<p>Consectetur adipisicing...</p>
</div>
<div class="error-message inverse-message">
<h3 class="message-title">Lorem ipsum...</h3>
<p>Consectetur adipisicing...</p>
</div>
Message Sizes
You can use .small-message to decrease the vertical padding a bit.