Message

Messages are used to provide feedback on user interactions or to describe the current state of the application.

Message with icon

Message with icon in full width

Arbitrary content / markup: Lorem ipsum dolor sit amet.

Message with icon in full width

Arbitrary content / markup: Lorem ipsum dolor sit amet.

Message with icon in full width

Arbitrary content / markup: Lorem ipsum dolor sit amet.

Message with icon in full width

Arbitrary content / markup: Lorem ipsum dolor sit amet.

Message with icon in full width

Arbitrary content / markup: Lorem ipsum dolor sit amet.

<div class="messageWrapper">
    <div class="message message--withIcon">
        <h1 class="message__headline">Message with icon in full width</h1>
        <p>
            Arbitrary content / markup: Lorem ipsum dolor sit amet.
        </p>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-informative message--withIcon">
        <h1 class="message__headline">Message with icon in full width</h1>
        <p>
            Arbitrary content / markup: Lorem ipsum dolor sit amet.
        </p>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-warning message--withIcon">
        <h1 class="message__headline">Message with icon in full width</h1>
        <p>
            Arbitrary content / markup: Lorem ipsum dolor sit amet.
        </p>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-alert message--withIcon">
        <h1 class="message__headline">Message with icon in full width</h1>
        <p>
            Arbitrary content / markup: Lorem ipsum dolor sit amet.
        </p>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-success message--withIcon">
        <h1 class="message__headline">Message with icon in full width</h1>
        <p>
            Arbitrary content / markup: Lorem ipsum dolor sit amet.
        </p>
    </div>
</div>

Usage

Element	Class	Description
`h1`	Or any tag with `.message__headline`	You can either use a `h1` tag OR a `.message__headline` class to describe your main headlines in a message.
`.message`		Without any additional state class the message has a gray colored font on a light gray background.
`.message`	`.is-informative`	This state class applies a blue font on a light blue background.
`.message`	`.is-warning`	This state class applies a gray font on a yellow background.
`.message`	`.is-alert`	This state class applies a red font on a light red background. Can also be used in combination with form validations.
`.message`	`.is-success`	This state class applies a green font on a light green background.
`.message`	`.message--withIcon`	Adds appropriate icon on the left side of the message based on the type (`is-informative`, `is-warning`, `is-alert`, `is-success`).

Message with icon in content width

Message with icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message with icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message with icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message with icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message with icon

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="messageWrapper">
    <div class="message has-contentWidth message--withIcon">
        <h1 class="message__headline">Message with icon</h1>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message has-contentWidth is-informative message--withIcon">
        <h1 class="message__headline">Message with icon</h1>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message has-contentWidth is-warning message--withIcon">
        <h1 class="message__headline">Message with icon</h1>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message has-contentWidth is-alert message--withIcon">
        <h1 class="message__headline">Message with icon</h1>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message has-contentWidth is-success message--withIcon">
        <h1 class="message__headline">Message with icon</h1>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</div>

Usage

Element	Class	Description
`.message`	`.has-contentWidth`	Shrinks the message to its content size.

Message without icon

Message in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="messageWrapper">
    <div class="message">
        <h1 class="message__headline">Message in full width</h1>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-informative">
        <h1 class="message__headline">Message in full width</h1>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-warning">
        <h1 class="message__headline">Message in full width</h1>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-alert">
        <h1 class="message__headline">Message in full width</h1>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-success">
        <h1 class="message__headline">Message in full width</h1>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</div>

Message in content width

Message

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Message

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

<div class="messageWrapper">
    <div class="message has-contentWidth">
        <h1 class="message__headline">Message</h1>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message has-contentWidth is-informative">
        <h1 class="message__headline">Message</h1>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message has-contentWidth is-warning">
        <h1 class="message__headline">Message</h1>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message has-contentWidth is-alert">
        <h1 class="message__headline">Message</h1>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message has-contentWidth is-success">
        <h1 class="message__headline">Message</h1>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </div>
    </div>
</div>

Small message with icon

Small message with icon in full width

<div class="messageWrapper">
    <div class="message message--small message--withIcon">
        <div>
            Small message with icon in full width
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-informative message--small message--withIcon">
        <div>
            Small message with icon in full width
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-warning message--small message--withIcon">
        <div>
            Small message with icon in full width
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-alert message--small message--withIcon">
        <div>
            Small message with icon in full width
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-success message--small message--withIcon">
        <div>
            Small message with icon in full width
        </div>
    </div>
</div>

Usage

Element	Class	Description
`.message`	`.message--small`	Applies a minimized styling to the message.
`.message.message--small`	`.message--withIcon`	Adds an icon on the left side of the message based on the type (`is-informative`, `is-warning`, `is-alert`, `is-success`).

Small message with icon in content width

Small message with icon

<div class="messageWrapper">
    <div class="message message--small message--withIcon has-contentWidth">
        <div>
            Small message with icon
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-informative message--small message--withIcon has-contentWidth">
        <div>
            Small message with icon
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-warning message--small message--withIcon has-contentWidth">
        <div>
            Small message with icon
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-alert message--small message--withIcon has-contentWidth">
        <div>
            Small message with icon
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-success message--small message--withIcon has-contentWidth">
        <div>
            Small message with icon
        </div>
    </div>
</div>

Small message without icon

Small message in full width

<div class="messageWrapper">
    <div class="message message--small">
        <div>
            Small message in full width
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-informative message--small">
        <div>
            Small message in full width
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-warning message--small">
        <div>
            Small message in full width
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-alert message--small">
        <div>
            Small message in full width
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-success message--small">
        <div>
            Small message in full width
        </div>
    </div>
</div>

Small message in content width

Small message

<div class="messageWrapper">
    <div class="message has-contentWidth message--small">
        <div>
            Small message
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message has-contentWidth is-informative message--small">
        <div>
            Small message
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message has-contentWidth is-warning message--small">
        <div>
            Small message
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message has-contentWidth is-alert message--small">
        <div>
            Small message
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message has-contentWidth is-success message--small">
        <div>
            Small message
        </div>
    </div>
</div>

Additional example in full width

Message with a link in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Message with a button, icon in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tempor invidunt ut labore et dolore magna aliquyam erat.

Message with a link, a button in full width

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam. Stet clita kasd gubergren, no sea takimata.

At vero eos et accusam et justo duo dolores et ea rebum.

Message with icon, an ordered list in full width

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy:

Eirmod tempor invidunt ut labore.
Et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam.

Message with an ordered list, a link, a button in full width

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy:

Eirmod tempor invidunt ut labore.
Et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr vero eos et accusam.

<div class="messageWrapper">
    <div class="message">
        <h1 class="message__headline">Message with a link in full width</h1>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit <a href="#" title="Link to something">at vero eos et accusam</a>.
        </div>
        <p>
            Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
        </p>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-informative message--withIcon">
        <h1 class="message__headline">Message with a button, icon in full width</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
        <button class="button--secondary">Sed diam nonumy eirmod</button>
        <div>
            Tempor invidunt ut labore et dolore magna aliquyam erat.
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-warning">
        <h1 class="message__headline">Message with a link, a button in full width</h1>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit <a href="#" title="Link to something">at vero eos et accusam</a>. Stet clita kasd gubergren, no sea takimata.
        </div>
        <div>
            At vero eos et accusam et justo duo dolores et ea rebum.
        </div>
        <button class="button--primary">Eirmod tempor invidunt</button>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-alert message--withIcon">
        <h1 class="message__headline">Message with icon, an ordered list in full width</h1>
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy:
        </p>
        <ol>
            <li>
                <label>Eirmod tempor invidunt ut labore.</label>
            </li>
            <li>
                <label>Et dolore magna aliquyam erat, sed diam voluptua.</label>
            </li>
            <li>
                <label>At vero eos et accusam.</label>
            </li>
        </ol>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-success">
        <h1 class="message__headline">Message with an ordered list, a link, a button in full width</h1>
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy:
        </p>
        <ul>
            <li>
                Eirmod tempor invidunt ut labore.
            </li>
            <li>
                Et dolore magna aliquyam erat, sed diam voluptua.
            </li>
            <li>
                At vero eos et accusam.
            </li>
        </ul>
        <div>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr <a href="#" title="Link to something">vero eos et accusam</a>.
        </div>
        <button class="button--primary">Sed diam nonumy eirmod</button>
    </div>
</div>

Additional examples with arbitrary markup

Message with a link in content width

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam.

Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Message with a button, icon in content width

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Tempor invidunt ut labore et dolore magna aliquyam erat.

Message with a link, a button in content width

Lorem ipsum dolor sit amet, consectetur adipiscing elit at vero eos et accusam. Stet clita kasd gubergren.

At vero eos et accusam et justo duo dolores et ea rebum.

Message with icon, an ordered list in content width

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy:

Eirmod tempor invidunt ut labore.
Et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam.

Message with an ordered list, a link, a button in content width

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy:

Eirmod tempor invidunt ut labore.
Et dolore magna aliquyam erat, sed diam voluptua.
At vero eos et accusam.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr vero eos et accusam.

<div class="messageWrapper">
    <div class="message has-contentWidth">
        <h1 class="message__headline">Message with a link in content width</h1>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit <a href="#" title="Link to something">at vero eos et accusam</a>.
        </div>
        <p>
            Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        </p>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-informative message--withIcon has-contentWidth">
        <h1 class="message__headline">Message with a button, icon in content width</h1>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
        <button class="button--secondary">Sed diam nonumy eirmod</button>
        <div>
            Tempor invidunt ut labore et dolore magna aliquyam erat.
        </div>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-warning has-contentWidth">
        <h1 class="message__headline">Message with a link, a button in content width</h1>
        <div>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit <a href="#" title="Link to something">at vero eos et accusam</a>. Stet clita kasd gubergren.
        </div>
        <div>
            At vero eos et accusam et justo duo dolores et ea rebum.
        </div>
        <button class="button--primary">Eirmod tempor invidunt</button>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-alert message--withIcon has-contentWidth">
        <h1 class="message__headline">Message with icon, an ordered list in content width</h1>
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy:
        </p>
        <ol>
            <li>
                <label>Eirmod tempor invidunt ut labore.</label>
            </li>
            <li>
                <label>Et dolore magna aliquyam erat, sed diam voluptua.</label>
            </li>
            <li>
                <label>At vero eos et accusam.</label>
            </li>
        </ol>
    </div>
</div>

<div class="messageWrapper">
    <div class="message is-success has-contentWidth">
        <h1 class="message__headline">Message with an ordered list, a link, a button in content width</h1>
        <p>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy:
        </p>
        <ul>
            <li>
                Eirmod tempor invidunt ut labore.
            </li>
            <li>
                Et dolore magna aliquyam erat, sed diam voluptua.
            </li>
            <li>
                At vero eos et accusam.
            </li>
        </ul>
        <div>
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr <a href="#" title="Link to something">vero eos et accusam</a>.
        </div>
        <button class="button--primary">Sed diam nonumy eirmod</button>
    </div>
</div>

Message (Patterns)