Message

A message highlights context information, recent events or gives feedback on actions.

Usage

When to use

Use a message in the following cases:

  • To display permanent information: A message is shown close to a certain piece of content.
  • To display conditional information: A message appears close to a certain piece of content. For example when validating a form.

A message transfers important information that is relevant and related to the context.

Types

There are the following message types:

Error/Alert

Use an error message for user-caused incidents and an alert message for system-caused incidents. Both are displayed the same way and indicate an actual problem.

message-usage-types-alert

Error/Alert message

Warning

Use a warning message to warn of a possible issue that requires attention.

message-usage-types-warning

Warning message

Success

Use a success message to inform about successful system events or user actions.

message-usage-types-success

Success message

Info

Use an info message to give neutral context information.

message-usage-types-info

Info message

General construction

A message consists of the following elements:

message-usage-general

1. Icon, 2. Headline, 3. Content, 4. Background

1. Icon

  • The icon is predefined according to the severity.
  • The visibility of the icon is optional.
  • The icon should match the message’s severity.

2. Headline

  • The headline summarizes the message’s content.

3. Content

  • The content gives textual information about the situation, causes and/or follow-up actions.
  • The content can contain optional hyperlinks, buttons or a list.

4. Background

  • The background color matches the severity.

Options

The following message options are available:

Message

A regular sized message contains an optional icon, a headline and content.

message-usage-types-standard-icon

Message with icon

The icon can be left out to save space.

message-usage-types-standard-without-icon

Message without icon

Small message

A small message consists of an optional icon and a one-line statement.

message-usage-types-small

Small message without and with icon

Behavior

General behavior

  • A message itself is not clickable.
  • Buttons or hyperlinks in the content of a message are clickable.

message-usage-behavior-button

Message with button
  • Multiple messages of one severity state are displayed as one message containing a list of information.

message-usage-behavior-multiple-list

Message with a list

Placement

Place a message in the main region below the content header or, if it belongs to the content of a certain tab, below the tab bar.

message-usage-behavior-placement-message

Message below the content header

A small message can be placed in a certain context, for example in a form next to an input element.

message-usage-behavior-placement-small-message

Small message in a form

Do’s & Don’ts

message-usage-do

message-usage-dont

  • Use a message only for important information.
  • Don’t use too many messages.

Style

This chapter shows several message styles in the design system.

Overview

Severity

The different severity states of a message are distinguished by color and icon.

Error/Alert

message-style-overview-alert

The most critical severity state is highlighted in red.
Warning

message-style-overview-warning

The second most critical severity state is highlighted in yellow.
Success

message-style-overview-success

Positive feedback is colored green.
Info

message-style-overview-info

Neutral information is colored blue.

Sizes

The size of a message depends entirely on how much content it should convey.

Message

message-style-overview-size-standard

1. With icon, 2. Without icon
Small message

message-style-overview-size-small

1. With icon, 2. Without icon

Further information

Messages of all types can contain hyperlinks. Portions of the content can be emphasized in bold letters.

message-style-overview-highlight

Small success message with emphasized word

message-style-overview-highlight-link

Info message with a hyperlink

Only regular sized messages can contain buttons or a list.

message-style-overview-highlight-button

Warning message with a button

message-style-overview-highlight-list

Error/Alert message with a list

Typography

The following table gives reference to the different font sizes and weights:

NameStateFont-familyFont-sizeLine-heightText-align
HeadlineallSiemens Sans Bold14px20pxleft
ContentallSiemens Sans Roman14px20pxleft
Content highlightedallSiemens Sans Bold14px20pxleft

Sizing and spacing

The following measurements show the dimensions for this component:

message-style-spacings-spacing

Sizing for: 1. Small message, 2. Message

message-style-spacings-sizing

Spacing for: 1. Small message, 2. Message

To see a detailed explanation of all existing classes, please refer to the usage table below.

Message with icon

Message with icon in full width

Arbitrary content / markup: Lorem ipsum dolor sit amet.

Info message with icon in full width

Arbitrary content / markup: Lorem ipsum dolor sit amet.

Warning message with icon in full width

Arbitrary content / markup: Lorem ipsum dolor sit amet.

Error/alert message with icon in full width

Arbitrary content / markup: Lorem ipsum dolor sit amet.

Success 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-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

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-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

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-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

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-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

Small message with icon in full width
Small message with icon in full width
Small message with icon in full width
Small message with icon in full width
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-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

Small message with icon
Small message with icon
Small message with icon
Small message with icon
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-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

Small message in full width
Small message in full width
Small message in full width
Small message in full width
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-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

Small message
Small message
Small message
Small message
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-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

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:

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-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 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 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 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:

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-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 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 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 button--primary">Sed diam nonumy eirmod</button>
    </div>
</div>

Usage

ElementClassDescription
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.
Except where otherwise noted, content on this site is licensed under the MindSphere Development License Agreement.
Back to top