Information
<div class="ecl-notification ecl-notification--info" data-ecl-notification role="alert" data-ecl-auto-init="Notification"><svg class="ecl-icon ecl-icon--l ecl-notification__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.4713c4a6.svg#information"></use> </svg> <div class="ecl-notification__content"><button class="ecl-button ecl-button--tertiary ecl-notification__close ecl-button--icon-only" type="button" data-ecl-notification-close><span class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">Close</span><svg class="ecl-icon ecl-icon--m ecl-button__icon" focusable="false" aria-hidden="true" data-ecl-icon> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.4713c4a6.svg#close"></use> </svg></span></button> <div class="ecl-notification__title">Information notification</div> <div class="ecl-notification__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.</div> </div> </div>
Try it yourself on the playground
PlaygroundSuccess
<div class="ecl-notification ecl-notification--success" data-ecl-notification role="alert" data-ecl-auto-init="Notification"><svg class="ecl-icon ecl-icon--l ecl-notification__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.4713c4a6.svg#success"></use> </svg> <div class="ecl-notification__content"><button class="ecl-button ecl-button--tertiary ecl-notification__close ecl-button--icon-only" type="button" data-ecl-notification-close><span class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">Close</span><svg class="ecl-icon ecl-icon--m ecl-button__icon" focusable="false" aria-hidden="true" data-ecl-icon> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.4713c4a6.svg#close"></use> </svg></span></button> <div class="ecl-notification__title">Success notification</div> <div class="ecl-notification__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.</div> </div> </div>
Try it yourself on the playground
PlaygroundWarning
<div class="ecl-notification ecl-notification--warning" data-ecl-notification role="alert" data-ecl-auto-init="Notification"><svg class="ecl-icon ecl-icon--l ecl-notification__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.4713c4a6.svg#warning"></use> </svg> <div class="ecl-notification__content"><button class="ecl-button ecl-button--tertiary ecl-notification__close ecl-button--icon-only" type="button" data-ecl-notification-close><span class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">Close</span><svg class="ecl-icon ecl-icon--m ecl-button__icon" focusable="false" aria-hidden="true" data-ecl-icon> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.4713c4a6.svg#close"></use> </svg></span></button> <div class="ecl-notification__title">Warning notification</div> <div class="ecl-notification__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.</div> </div> </div>
Try it yourself on the playground
PlaygroundError
<div class="ecl-notification ecl-notification--error" data-ecl-notification role="alert" data-ecl-auto-init="Notification"><svg class="ecl-icon ecl-icon--l ecl-notification__icon" focusable="false" aria-hidden="true"> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.4713c4a6.svg#error"></use> </svg> <div class="ecl-notification__content"><button class="ecl-button ecl-button--tertiary ecl-notification__close ecl-button--icon-only" type="button" data-ecl-notification-close><span class="ecl-button__container"><span class="ecl-button__label" data-ecl-label="true">Close</span><svg class="ecl-icon ecl-icon--m ecl-button__icon" focusable="false" aria-hidden="true" data-ecl-icon> <use xlink:href="/component-library/v4.0.0-beta-1/dist/media/icons.4713c4a6.svg#close"></use> </svg></span></button> <div class="ecl-notification__title">Error notification</div> <div class="ecl-notification__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam accumsan semper lorem, ac mollis lacus tincidunt eu. Duis scelerisque diam eu tempus fringilla.</div> </div> </div>
Try it yourself on the playground
Playground