Archived version of the User Experience Toolkit for Insights Hub and Industrial IoT website, version 2.8.1

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

Error/Alert message

#### Warning

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

Warning message

#### Success

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

Success message

#### Info

Use an info message to give neutral context information.

Info message

### General construction

A message consists of the following elements:

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

The icon can be left out to save space.

Message without icon

#### Small message

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

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

- Multiple messages of one severity state are displayed as one message containing a list of information.

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 below the content header

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

Small message in a form

### Do’s & Don’ts

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

## Style

This chapter shows several message styles in the User Experience Toolkit.

### Overview

#### Severity

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

##### Error/Alert

The most critical severity state is highlighted in red.

##### Warning

The second most critical severity state is highlighted in yellow.

##### Success

Positive feedback is colored green.

##### Info

Neutral information is colored blue.

#### Sizes

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

##### Message

1. With icon, 2. Without icon

##### Small message

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.

Small success message with emphasized word

Info message with a hyperlink

Only regular sized messages can contain buttons or a list.

Warning message with a button

Error/Alert message with a list

### Typography

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

Name | State | Font-family | Font-size | Line-height | Text-align
--- | --- | --- | --- | --- | ---
Headline | all | Siemens Sans Bold | 14px | 20px | left
Content | all | Siemens Sans Roman | 14px | 20px | left
Content highlighted | all | Siemens Sans Bold | 14px | 20px | left

### Sizing and spacing

The following measurements show the dimensions for this component:

Sizing for: 1. Small message, 2. Message

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:

1. Eirmod tempor invidunt ut labore.
2. Et dolore magna aliquyam erat, sed diam voluptua.
3. 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-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:

1. Eirmod tempor invidunt ut labore.
2. Et dolore magna aliquyam erat, sed diam voluptua.
3. 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-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

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.

- Form validation
- Switch

Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Back to top