Message
About
What does it do?
- Gives user feedback during the interaction with a website (informs about error, warning, success). Messages are colour coded and use symbols to reinforce the message. The structure of the message: what happened? what does it mean? what can user do about it?)
When to use it?
- When user needs explicit indication that something has gone wrong (user error or website/app error)
- When user is about to do something that is destructive or when the result of an action is unexpected but it is not an error (Warning Message)
- When user needs confirmation of success (Success message)
- When user needs key information about upcoming change (Information message).
- Real time inline validation to inform users about the correctness of provided data.
Information
Information about XXXXXXXXX was successfully updated!
Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum text.
HTML markup
<div class="wmnds-msg-summary wmnds-msg-summary--info ">
<div class="wmnds-msg-summary__header">
<svg class="wmnds-msg-summary__icon">
<use xlink:href="#wmnds-general-info" href="#wmnds-general-info"></use>
</svg>
<h3 class="wmnds-msg-summary__title">Information about XXXXXXXXX was successfully updated!</h3>
</div>
<div class="wmnds-msg-summary__info">
Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum text.
</div>
</div>
Nunjucks markup
{% from "wmnds/components/message/summary/_summary.njk" import wmndsMsgSummary %}
{{
wmndsMsgSummary({
type: "info",
title: "Information about XXXXXXXXX was successfully updated!",
subtitle: null,
contentText: "Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum text.",
contentHTML: null,
dismissable: false,
classes: null
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| type | string | Type of the message component. As default it is info. Available types: info, success, success-fill, success-fill-no-icon, warning, error |
| title | string | The title text for the message displayed as h3. |
| subtitle | string | The subtitle text for the message. |
| contentText | string | Required. The text that displays in the message component. You can use any string with this option. If you set contentHTML, this option is not required and is ignored. |
| contentHTML | string | Required. The HTML to use within the message component. You can use any string with this option. If you set contentHTML, contentText is not required and is ignored. |
| dismissable | boolean | If dismissable is set to true, the component will display a close icon. |
| classes | string | Classes to add to the summary container. |
Success
Success confirmation
Details added if needed to confirm action.
HTML markup
<div class="wmnds-msg-summary wmnds-msg-summary--success ">
<div class="wmnds-msg-summary__header">
<svg class="wmnds-msg-summary__icon">
<use xlink:href="#wmnds-general-success" href="#wmnds-general-success"></use>
</svg>
<h3 class="wmnds-msg-summary__title">Success confirmation</h3>
</div>
<div class="wmnds-msg-summary__info">
Details added if needed to confirm action.
</div>
</div>
Nunjucks markup
{% from "wmnds/components/message/summary/_summary.njk" import wmndsMsgSummary %}
{{
wmndsMsgSummary({
type: "info",
title: "Information about XXXXXXXXX was successfully updated!",
subtitle: null,
contentText: "Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum text.",
contentHTML: null,
dismissable: false,
classes: null
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| type | string | Type of the message component. As default it is info. Available types: info, success, success-fill, success-fill-no-icon, warning, error |
| title | string | The title text for the message displayed as h3. |
| subtitle | string | The subtitle text for the message. |
| contentText | string | Required. The text that displays in the message component. You can use any string with this option. If you set contentHTML, this option is not required and is ignored. |
| contentHTML | string | Required. The HTML to use within the message component. You can use any string with this option. If you set contentHTML, contentText is not required and is ignored. |
| dismissable | boolean | If dismissable is set to true, the component will display a close icon. |
| classes | string | Classes to add to the summary container. |
Success (fill)
Success confirmation
Details added if needed to confirm action.
HTML markup
<div class="wmnds-msg-summary wmnds-msg-summary--success-fill ">
<div class="wmnds-msg-summary__header">
<svg class="wmnds-msg-summary__icon">
<use xlink:href="#wmnds-general-success" href="#wmnds-general-success"></use>
</svg>
<h3 class="wmnds-msg-summary__title">Success confirmation</h3>
</div>
<div class="wmnds-msg-summary__info">
Details added if needed to confirm action.
</div>
</div>
Nunjucks markup
{% from "wmnds/components/message/summary/_summary.njk" import wmndsMsgSummary %}
{{
wmndsMsgSummary({
type: "info",
title: "Information about XXXXXXXXX was successfully updated!",
subtitle: null,
contentText: "Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum text.",
contentHTML: null,
dismissable: false,
classes: null
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| type | string | Type of the message component. As default it is info. Available types: info, success, success-fill, success-fill-no-icon, warning, error |
| title | string | The title text for the message displayed as h3. |
| subtitle | string | The subtitle text for the message. |
| contentText | string | Required. The text that displays in the message component. You can use any string with this option. If you set contentHTML, this option is not required and is ignored. |
| contentHTML | string | Required. The HTML to use within the message component. You can use any string with this option. If you set contentHTML, contentText is not required and is ignored. |
| dismissable | boolean | If dismissable is set to true, the component will display a close icon. |
| classes | string | Classes to add to the summary container. |
Warning
Warning message
Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum.
HTML markup
<div class="wmnds-msg-summary wmnds-msg-summary--warning ">
<div class="wmnds-msg-summary__header">
<svg class="wmnds-msg-summary__icon">
<use xlink:href="#wmnds-general-warning-circle" href="#wmnds-general-warning-circle"></use>
</svg>
<h3 class="wmnds-msg-summary__title">Warning message</h3>
</div>
<div class="wmnds-msg-summary__info">
Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum.
</div>
</div>
Nunjucks markup
{% from "wmnds/components/message/summary/_summary.njk" import wmndsMsgSummary %}
{{
wmndsMsgSummary({
type: "info",
title: "Information about XXXXXXXXX was successfully updated!",
subtitle: null,
contentText: "Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum text.",
contentHTML: null,
dismissable: false,
classes: null
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| type | string | Type of the message component. As default it is info. Available types: info, success, success-fill, success-fill-no-icon, warning, error |
| title | string | The title text for the message displayed as h3. |
| subtitle | string | The subtitle text for the message. |
| contentText | string | Required. The text that displays in the message component. You can use any string with this option. If you set contentHTML, this option is not required and is ignored. |
| contentHTML | string | Required. The HTML to use within the message component. You can use any string with this option. If you set contentHTML, contentText is not required and is ignored. |
| dismissable | boolean | If dismissable is set to true, the component will display a close icon. |
| classes | string | Classes to add to the summary container. |
Error
Error message
Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum.
HTML markup
<div class="wmnds-msg-summary wmnds-msg-summary--error ">
<div class="wmnds-msg-summary__header">
<svg class="wmnds-msg-summary__icon">
<use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
</svg>
<h3 class="wmnds-msg-summary__title">Error message</h3>
</div>
<div class="wmnds-msg-summary__info">
Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum.
</div>
</div>
Nunjucks markup
{% from "wmnds/components/message/summary/_summary.njk" import wmndsMsgSummary %}
{{
wmndsMsgSummary({
type: "info",
title: "Information about XXXXXXXXX was successfully updated!",
subtitle: null,
contentText: "Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum text.",
contentHTML: null,
dismissable: false,
classes: null
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| type | string | Type of the message component. As default it is info. Available types: info, success, success-fill, success-fill-no-icon, warning, error |
| title | string | The title text for the message displayed as h3. |
| subtitle | string | The subtitle text for the message. |
| contentText | string | Required. The text that displays in the message component. You can use any string with this option. If you set contentHTML, this option is not required and is ignored. |
| contentHTML | string | Required. The HTML to use within the message component. You can use any string with this option. If you set contentHTML, contentText is not required and is ignored. |
| dismissable | boolean | If dismissable is set to true, the component will display a close icon. |
| classes | string | Classes to add to the summary container. |
Close message variant
What does it do?
- Allows the user to dismiss an Information, Success, Warning or Error message.
When to use it?
- When the information in the message is a response to a users action, or if the information is of low importance and only applies to a small set of users.
Information about XXXXXXXXX was successfully updated!
Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum.
HTML markup
<div class="wmnds-msg-summary wmnds-msg-summary--info ">
<button class="wmnds-msg-summary__close wmnds-link">
Close
<svg>
<use xlink:href="#wmnds-general-cross" href="#wmnds-general-cross"></use>
</svg>
</button>
<div class="wmnds-msg-summary__header">
<svg class="wmnds-msg-summary__icon">
<use xlink:href="#wmnds-general-info" href="#wmnds-general-info"></use>
</svg>
<h3 class="wmnds-msg-summary__title">Information about XXXXXXXXX was successfully updated!</h3>
</div>
<div class="wmnds-msg-summary__info">
Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum.
</div>
</div>
Nunjucks markup
{% from "wmnds/components/message/summary/_summary.njk" import wmndsMsgSummary %}
{{
wmndsMsgSummary({
type: "info",
title: "Information about XXXXXXXXX was successfully updated!",
subtitle: null,
contentText: "Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum text.",
contentHTML: null,
dismissable: false,
classes: null
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| type | string | Type of the message component. As default it is info. Available types: info, success, success-fill, success-fill-no-icon, warning, error |
| title | string | The title text for the message displayed as h3. |
| subtitle | string | The subtitle text for the message. |
| contentText | string | Required. The text that displays in the message component. You can use any string with this option. If you set contentHTML, this option is not required and is ignored. |
| contentHTML | string | Required. The HTML to use within the message component. You can use any string with this option. If you set contentHTML, contentText is not required and is ignored. |
| dismissable | boolean | If dismissable is set to true, the component will display a close icon. |
| classes | string | Classes to add to the summary container. |
Help
When to use it?
- The help message should be used when a user requires guidance on how to complete a digital task successfully.
- The user will be able to close the help message once they understand how to complete the task.
Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum.
HTML markup
<div class="wmnds-msg-help">
<button class="wmnds-msg-help__close-btn" aria-label="Close help message">
<svg class="wmnds-msg-help__close-icon">
<use xlink:href="#wmnds-general-cross" href="#wmnds-general-cross"></use>
</svg>
</button>
Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum.
</div>
Nunjucks markup
{% from "wmnds/components/message/help/_help.njk" import wmndsMsgHelp %}
{{
wmndsMsgHelp({
contentText: "Details added what happened and what to do next. Lorem ipsum lorem ipsum. Lorem ipsum lorem ipsum text.",
contentHTML: null,
dismissable: false
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| contentText | string | Required. The text that displays in the help message component. You can use any string with this option. If you set contentHTML, this option is not required and is ignored. |
| contentHTML | string | Required. The HTML to use within the help message component. You can use any string with this option. If you set contentHTML, contentText is not required and is ignored. |
| dismissable | boolean | If dismissable is set to true, the component will display a close icon. Defaults to true |