Messages

<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="/component-library/v2.39.0/dist/media/icons.3cf410f9.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="/component-library/v2.39.0/dist/media/icons.3cf410f9.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>

<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="/component-library/v2.39.0/dist/media/icons.3cf410f9.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="/component-library/v2.39.0/dist/media/icons.3cf410f9.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>

<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="/component-library/v2.39.0/dist/media/icons.3cf410f9.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="/component-library/v2.39.0/dist/media/icons.3cf410f9.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>

<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="/component-library/v2.39.0/dist/media/icons.3cf410f9.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="/component-library/v2.39.0/dist/media/icons.3cf410f9.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>