Information
<div class="ecl-message ecl-message--info" data-ecl-message="" role="alert" data-ecl-auto-init="Message"><svg
class="ecl-icon ecl-icon--l ecl-message__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.3278a5c4.svg#information"></use>
</svg>
<div class="ecl-message__content"><button class="ecl-button ecl-button--ghost ecl-message__close" type="button"
data-ecl-message-close=""><span class="ecl-button__container"><span class="ecl-button__label"
data-ecl-label="true">Close</span><svg class="ecl-icon ecl-icon--xs ecl-button__icon ecl-button__icon--after"
focusable="false" aria-hidden="true" data-ecl-icon="">
<use xlink:href="/dist/media/icons.3278a5c4.svg#close-filled"></use>
</svg></span></button>
<div class="ecl-message__title">Information message</div>
<p class="ecl-message__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper
lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.</p>
</div>
</div>
Try it yourself on the playground
PlaygroundSuccess
<div class="ecl-message ecl-message--success" data-ecl-message="" role="alert" data-ecl-auto-init="Message"><svg
class="ecl-icon ecl-icon--l ecl-message__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.3278a5c4.svg#success"></use>
</svg>
<div class="ecl-message__content"><button class="ecl-button ecl-button--ghost ecl-message__close" type="button"
data-ecl-message-close=""><span class="ecl-button__container"><span class="ecl-button__label"
data-ecl-label="true">Close</span><svg class="ecl-icon ecl-icon--xs ecl-button__icon ecl-button__icon--after"
focusable="false" aria-hidden="true" data-ecl-icon="">
<use xlink:href="/dist/media/icons.3278a5c4.svg#close-filled"></use>
</svg></span></button>
<div class="ecl-message__title">Success message</div>
<p class="ecl-message__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper
lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.</p>
</div>
</div>
Try it yourself on the playground
PlaygroundWarning
<div class="ecl-message ecl-message--warning" data-ecl-message="" role="alert" data-ecl-auto-init="Message"><svg
class="ecl-icon ecl-icon--l ecl-message__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.3278a5c4.svg#warning"></use>
</svg>
<div class="ecl-message__content"><button class="ecl-button ecl-button--ghost ecl-message__close" type="button"
data-ecl-message-close=""><span class="ecl-button__container"><span class="ecl-button__label"
data-ecl-label="true">Close</span><svg class="ecl-icon ecl-icon--xs ecl-button__icon ecl-button__icon--after"
focusable="false" aria-hidden="true" data-ecl-icon="">
<use xlink:href="/dist/media/icons.3278a5c4.svg#close-filled"></use>
</svg></span></button>
<div class="ecl-message__title">Warning message</div>
<p class="ecl-message__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper
lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.</p>
</div>
</div>
Try it yourself on the playground
PlaygroundError
<div class="ecl-message ecl-message--error" data-ecl-message="" role="alert" data-ecl-auto-init="Message"><svg
class="ecl-icon ecl-icon--l ecl-message__icon" focusable="false" aria-hidden="true">
<use xlink:href="/dist/media/icons.3278a5c4.svg#error"></use>
</svg>
<div class="ecl-message__content"><button class="ecl-button ecl-button--ghost ecl-message__close" type="button"
data-ecl-message-close=""><span class="ecl-button__container"><span class="ecl-button__label"
data-ecl-label="true">Close</span><svg class="ecl-icon ecl-icon--xs ecl-button__icon ecl-button__icon--after"
focusable="false" aria-hidden="true" data-ecl-icon="">
<use xlink:href="/dist/media/icons.3278a5c4.svg#close-filled"></use>
</svg></span></button>
<div class="ecl-message__title">Error message</div>
<p class="ecl-message__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper
lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.</p>
</div>
</div>
Try it yourself on the playground
Playground