Snack Bar

<div class="e-row">
  <div class="e-col-12" style="height: 250px; position: relative; border: 1px solid #ddd">
    <div class="e-snackbar e-snackbar-bottom">
      <div class="e-snackbar__content">
        <div class="e-snackbar__description">
          <h3>
            Lorem ipsum dolor sit amet
          </h3>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </div>
        </div>
        <div class="e-snackbar__actions">
          <button class="e-btn">
            Cancel
          </button>
          <button class="e-btn e-btn-primary" onclick="alert('close')">
            Confirm
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="e-row"><div class="e-col-12" style="height: 250px; position: relative; border: 1px solid #ddd"><div class="e-snackbar e-snackbar-bottom"><div class="e-snackbar__content"><div class="e-snackbar__description"><h3>Lorem ipsum dolor sit amet</h3><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div></div><div class="e-snackbar__actions"><button class="e-btn">Cancel</button><button class="e-btn e-btn-primary" onclick="alert('close')">Confirm</button></div></div></div></div></div>

<div class="e-row">
  <div class="e-col-12" style="height: 250px; position: relative; border: 1px solid #ddd">
    <div class="e-snackbar e-snackbar-autowidth">
      <div class="e-snackbar__content">
        <div class="e-snackbar__description">
          <h3>
            Lorem ipsum dolor sit amet
          </h3>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </div>
        </div>
        <div class="e-snackbar__actions">
          <button class="e-btn">
            Cancel
          </button>
          <button class="e-btn e-btn-primary" onclick="alert('close')">
            Confirm
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="e-row"><div class="e-col-12" style="height: 250px; position: relative; border: 1px solid #ddd"><div class="e-snackbar e-snackbar-autowidth"><div class="e-snackbar__content"><div class="e-snackbar__description"><h3>Lorem ipsum dolor sit amet</h3><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div></div><div class="e-snackbar__actions"><button class="e-btn">Cancel</button><button class="e-btn e-btn-primary" onclick="alert('close')">Confirm</button></div></div></div></div></div>

<div class="e-row">
  <div class="e-col-12" style="height: 250px; position: relative; border: 1px solid #ddd">
    <button class="e-btn e-btn-secondary" id="toggle-sticky">
      Toggle sticky
    </button>
    <script>
      document.querySelector('#toggle-sticky').addEventListener('click', function() {var snackbar = document.querySelector('#snackbar-sticky');var hasSticky = snackbar.classList.contains('e-snackbar-sticky');if (hasSticky) {snackbar.classList.remove('e-snackbar-sticky');} else {snackbar.classList.add('e-snackbar-sticky');}});
    </script>
    <div class="e-snackbar e-snackbar-bottom e-snackbar-autowidth" id="snackbar-sticky">
      <div class="e-snackbar__content">
        <div class="e-snackbar__description">
          <h3>
            Lorem ipsum dolor sit amet
          </h3>
          <div>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
          </div>
        </div>
        <div class="e-snackbar__actions">
          <button class="e-btn">
            Cancel
          </button>
          <button class="e-btn e-btn-primary" onclick="alert('close')">
            Confirm
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="e-row"><div class="e-col-12" style="height: 250px; position: relative; border: 1px solid #ddd"><button class="e-btn e-btn-secondary" id="toggle-sticky">Toggle sticky</button><script>document.querySelector('#toggle-sticky').addEventListener('click', function() {
  var snackbar = document.querySelector('#snackbar-sticky');
  var hasSticky = snackbar.classList.contains('e-snackbar-sticky');

  if (hasSticky) {
    snackbar.classList.remove('e-snackbar-sticky');
  } else {
    snackbar.classList.add('e-snackbar-sticky');
  }
});
</script><div class="e-snackbar e-snackbar-bottom e-snackbar-autowidth" id="snackbar-sticky"><div class="e-snackbar__content"><div class="e-snackbar__description"><h3>Lorem ipsum dolor sit amet</h3><div>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div></div><div class="e-snackbar__actions"><button class="e-btn">Cancel</button><button class="e-btn e-btn-primary" onclick="alert('close')">Confirm</button></div></div></div></div></div>