Status Messages
There are four types of status messages that you can use to give the user feedback.
Usage
You can construct a status message by giving a block element the classes status-message
and status-<status>
, where “status” is the type of status you want to
convey.
Within this element, you can use headlines and paragraphs as you normally would. Headlines will be automatically colored in the respective status color.
Status messages also come in a more compact version for one-line messages. Activate the short layout with the
additional status-message--short
class.
<div class="status-message status-confirm"> <h1>Success</h1> <p> Congratulations! Your request has been successfully processed in some way or another. </p> </div>
<div class="status-message status-message--short status-confirm"> <h1>Success</h1> <p> Rather concise Congratulations! </p> </div>
<div class="status-message status-info"> <h2>Heads up</h2> <p> This will interest you. No, really, it will. </p> </div>
<div class="status-message status-message--short status-info"> <h2>Important Information</h2> <p> Gotta be quick about it, though. </p> </div>
<div class="status-message status-warning"> <h3>Look out</h3> <p> If you keep going you may fall to your doom. </p> </div>
<div class="status-message status-message--short status-warning"> <h3>Look out</h3> <p> If you keep going you may fall. </p> </div>
<div class="status-message status-error"> <h4>Broken</h4> <p> You have destroyed everything. Well done. </p> </div>
<div class="status-message status-message--short status-error"> <h4>Broken</h4> <p> You have destroyed everything. </p> </div>