Notifications

<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="false" role="img">
    <title>Information</title>
    <use xlink:href="/component-library/dist/media/icons.a3ed8a97.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/dist/media/icons.a3ed8a97.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>

<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="false" role="img">
    <title>Success</title>
    <use xlink:href="/component-library/dist/media/icons.a3ed8a97.svg#check-filled"></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/dist/media/icons.a3ed8a97.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>

<div class="ecl-notification ecl-notification--warning" data-ecl-notification role="alert"
  data-ecl-auto-init="Notification"><span class="ecl-notification__icon-background"></span><svg
    class="ecl-icon ecl-icon--l ecl-notification__icon" focusable="false" aria-hidden="false" role="img">
    <title>Warning</title>
    <use xlink:href="/component-library/dist/media/icons.a3ed8a97.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/dist/media/icons.a3ed8a97.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>

<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="false" role="img">
    <title>Error</title>
    <use xlink:href="/component-library/dist/media/icons.a3ed8a97.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/dist/media/icons.a3ed8a97.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>