Messages

<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.cec58484.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.cec58484.svg#close-filled"></use>
        </svg></span></button>
    <div class="ecl-message__title">Information message</div>
    <div 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.</div>
  </div>
</div>

<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.cec58484.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.cec58484.svg#close-filled"></use>
        </svg></span></button>
    <div class="ecl-message__title">Success message</div>
    <div 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.</div>
  </div>
</div>

<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.cec58484.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.cec58484.svg#close-filled"></use>
        </svg></span></button>
    <div class="ecl-message__title">Warning message</div>
    <div 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.</div>
  </div>
</div>

<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.cec58484.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.cec58484.svg#close-filled"></use>
        </svg></span></button>
    <div class="ecl-message__title">Error message</div>
    <div 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.</div>
  </div>
</div>