@vcl/vcl/notification/demo/example-info.html

The whole VCL in one package

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/css/all.css">

<div class="notification info" role="alert">
  <div class="notification-icon-container">
    <span class="icon notification-icon fas fa-info-circle"></span>
  </div>
  <div class="notification-content">
      Info message without header and footer.
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
      dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
      Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore
      magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  </div>
  <button type="button" class="button square transparent" title="acknowledge">
    <div class="icogram" >
      <div class="icon fas fa-times" aria-hidden="true" aria-label="close" role="img"></div>
    </div>
  </button>
</div>