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.

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.

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.

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.

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.