Information
<div role="alert" class="ecl-message ecl-message--info" data-ecl-message="true"><svg focusable="false"
aria-hidden="true" class="ecl-message__icon ecl-icon ecl-icon--l">
<use xlink:href="/dist/media/icons.db866e2e.svg#notifications--information"></use>
</svg>
<div class="ecl-message__content"><button data-ecl-message-close="true" type="button"
class="ecl-message__close ecl-button ecl-button--ghost"><span class="ecl-button__container"><span
class="ecl-button__label" data-ecl-label="true">Close</span><svg focusable="false" aria-hidden="true"
data-ecl-icon="true" class="ecl-button__icon ecl-button__icon--after ecl-icon ecl-icon--s">
<use xlink:href="/dist/media/icons.db866e2e.svg#ui--close"></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 role="alert" class="ecl-message ecl-message--success" data-ecl-message="true"><svg focusable="false"
aria-hidden="true" class="ecl-message__icon ecl-icon ecl-icon--l">
<use xlink:href="/dist/media/icons.db866e2e.svg#notifications--success"></use>
</svg>
<div class="ecl-message__content"><button data-ecl-message-close="true" type="button"
class="ecl-message__close ecl-button ecl-button--ghost"><span class="ecl-button__container"><span
class="ecl-button__label" data-ecl-label="true">Close</span><svg focusable="false" aria-hidden="true"
data-ecl-icon="true" class="ecl-button__icon ecl-button__icon--after ecl-icon ecl-icon--s">
<use xlink:href="/dist/media/icons.db866e2e.svg#ui--close"></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 role="alert" class="ecl-message ecl-message--warning" data-ecl-message="true"><svg focusable="false"
aria-hidden="true" class="ecl-message__icon ecl-icon ecl-icon--l">
<use xlink:href="/dist/media/icons.db866e2e.svg#notifications--warning"></use>
</svg>
<div class="ecl-message__content"><button data-ecl-message-close="true" type="button"
class="ecl-message__close ecl-button ecl-button--ghost"><span class="ecl-button__container"><span
class="ecl-button__label" data-ecl-label="true">Close</span><svg focusable="false" aria-hidden="true"
data-ecl-icon="true" class="ecl-button__icon ecl-button__icon--after ecl-icon ecl-icon--s">
<use xlink:href="/dist/media/icons.db866e2e.svg#ui--close"></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 role="alert" class="ecl-message ecl-message--error" data-ecl-message="true"><svg focusable="false"
aria-hidden="true" class="ecl-message__icon ecl-icon ecl-icon--l">
<use xlink:href="/dist/media/icons.db866e2e.svg#notifications--error"></use>
</svg>
<div class="ecl-message__content"><button data-ecl-message-close="true" type="button"
class="ecl-message__close ecl-button ecl-button--ghost"><span class="ecl-button__container"><span
class="ecl-button__label" data-ecl-label="true">Close</span><svg focusable="false" aria-hidden="true"
data-ecl-icon="true" class="ecl-button__icon ecl-button__icon--after ecl-icon ecl-icon--s">
<use xlink:href="/dist/media/icons.db866e2e.svg#ui--close"></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
PlaygroundJS behaviour
Auto initialisation
In order to automatically initalise the JS behaviour, add data-ecl-auto-init="Message" to your component's markup:
<div
role="alert"
class="ecl-message ecl-message--info"
data-ecl-message
data-ecl-auto-init="Message"
>
...
</div>
Don't forget to call ECL.autoInit() when your page is ready!
Manual initialisation
When the document is ready, query the element. For example, you can use document.querySelector('[data-ecl-galmessagelery]') if you only have 1 message in the page.
Then, instantiate the Message component and call init():
var elt = document.querySelector('[data-ecl-message]');
var message = new ECL.Message(elt);
message.init();