Message
Messages are used to provide feedback on user interactions or to describe the current state of the application.
To see a detailed explanation of all existing classes, please refer to the usage table below.
Message with icon
<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-info message--withIcon">
<h1 class="message__headline">Info 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">Warning 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">Error/alert 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">Success message with icon in full width</h1>
<p>
Arbitrary content / markup: Lorem ipsum dolor sit amet.
</p>
</div>
</div>
Message with icon in content width
<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-info 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>
Message without icon
<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-info">
<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
<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-info">
<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
<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-info 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>
Small message with icon in content width
<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-info 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
<div class="messageWrapper">
<div class="message message--small">
<div>
Small message in full width
</div>
</div>
</div>
<div class="messageWrapper">
<div class="message is-info 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
<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-info 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
<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-info 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
<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-info 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>
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-error,.is-alert .is-warning .is-success .is-info | Sets the appropriate severity state for a message. |
.message | .message--withIcon | Adds appropriate icon on the left side of the message based on the type (is-info, is-warning, is-alert, is-success). |
.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-info, is-warning, is-alert, is-success). |
.message | .has-contentWidth | Shrinks the message to its content size. |