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.
Confirmation message
<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-confirm">
<h1>Success</h1>
<p>
Congratulations! Your request has been
successfully processed in some way or
another.
</p>
</div>
Success
Congratulations! Your request has been
successfully processed in some way or
another.
<div class = "status-message status-message--short status-confirm" >
<h4> Success </h4>
<p>
Rather concise congratulations!
</p>
</div> <div class="status-message status-message--short status-confirm">
<h4>Success</h4>
<p>
Rather concise congratulations!
</p>
</div>
Success
Rather concise congratulations!
Information message
<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-info">
<h2>Heads up</h2>
<p>
This will interest you.
No, really, it will.
</p>
</div>
Heads up
This will interest you.
No, really, it will.
<div class = "status-message status-message--short status-info" >
<h4> Important Information </h4>
<p>
We don't have much time!
</p>
</div> <div class="status-message status-message--short status-info">
<h4>Important Information</h4>
<p>
We don't have much time!
</p>
</div>
Important Information
We don't have much time!
Warning message
<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-warning">
<h3>Look out</h3>
<p>
If you keep going you may fall
to your doom.
</p>
</div>
Look out
If you keep going you may fall
to your doom.
<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-message--short status-warning">
<h3>Look out</h3>
<p>
If you keep going you may fall.
</p>
</div>
Look out
If you keep going you may fall.
Error message
<div class = "status-message status-error" >
<h4> Broken </h4>
<p>
You have destroyed everything.
Well done.
</p>
</div> <div class="status-message status-error">
<h4>Broken</h4>
<p>
You have destroyed everything.
Well done.
</p>
</div>
Broken
You have destroyed everything.
Well done.
<div class = "status-message status-message--short status-error" >
<h4> Broken </h4>
<p>
You have destroyed everything.
</p>
</div> <div class="status-message status-message--short status-error">
<h4>Broken</h4>
<p>
You have destroyed everything.
</p>
</div>
Broken
You have destroyed everything.