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>

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>

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>

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>

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>

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>

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>

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>

Broken

You have destroyed everything.