Status Messages
There are four 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 block element, you can use headlines and paragraphs as you normally would. Headlines will be colored in the respective status color and have the same font size regardless of headline type.
<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-info"> <h2>Heads up</h2> <p> This will interest you. No, really, it will. </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-error"> <h4>Broken</h4> <p> You have destroyed everything. Well done. </p> </div>