<div class="global-messages" style="margin-top: 0">
<div class="message-list">
<div class="message-list__message">
<div class="message--warning has-no-space">
<div class="message__container">
<span class="visually-hidden">Warning message</span>
<div class="message__content">
<p class="message__text">Am 17.08.2021 zwischen 22 Uhr und 23 Uhr finden geplante Wartungsarbeiten statt. Die Website wird während dieser Zeit nur eingeschränkt zur Verfügung stehen.</p>
</div>
<div class="message__close-button">
<button class="button-icon--icon-regular -icon-close" type="button" name="close-big-menu" value="yes">
<span class="visually-hidden">Schliessen</span>
</button>
</div>
</div>
</div>
</div>
<div class="message-list__message">
<div class="message--warning has-no-space">
<div class="message__container">
<span class="visually-hidden">Warning message</span>
<div class="message__content">
<p class="message__text">Zum Produkt X in Ihrem Warenkorb liegt ein Big Deal vor. Dieses Produkt wurde daher durch das Angebot ersetzt.</p>
</div>
<div class="message__close-button">
<button class="button-icon--icon-regular -icon-close" type="button" name="close-big-menu" value="yes">
<span class="visually-hidden">Schliessen</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
{% include '@SharedComponents/modules/page/components/global-messages/global-messages.twig' %}
{
"demo": true,
"globalMessages": [
{
"isHidden": false,
"closeButton": {
"variant": "icon-regular",
"title": "Schliessen",
"icon": "close",
"type": "button",
"role": "button",
"name": "close-big-menu",
"value": "yes"
},
"labels": {
"info": "Information message",
"error": "Error message",
"warning": "Warning message",
"success": "Success message"
},
"variant": "warning",
"spacing": false,
"message": "Am 17.08.2021 zwischen 22 Uhr und 23 Uhr finden geplante Wartungsarbeiten statt. Die Website wird während dieser Zeit nur eingeschränkt zur Verfügung stehen."
},
{
"isHidden": false,
"closeButton": {
"variant": "icon-regular",
"title": "Schliessen",
"icon": "close",
"type": "button",
"role": "button",
"name": "close-big-menu",
"value": "yes"
},
"labels": {
"info": "Information message",
"error": "Error message",
"warning": "Warning message",
"success": "Success message"
},
"variant": "warning",
"spacing": false,
"message": "Zum Produkt X in Ihrem Warenkorb liegt ein Big Deal vor. Dieses Produkt wurde daher durch das Angebot ersetzt."
}
]
}
import './global-messages.scss';
@import "~shared/base";
@import "~cando-cx-components-library/components/modules/page/components/global-messages/global-messages";
The purpose of this component, in comparison to the message list, is the negative margin top for page container