Link copied!

Floating Panel Examples

This is a work in progress component, please talk to the Design System Team before using it.
<button class="e-btn" onclick="openPanel1()">
  Open Floating Panel
</button>
<div class="e-floating-panel e-hidden" id="floatingPanel1">
  <div class="e-section">
    <div class="e-section__header">
      <div class="e-section__title">
        Title Goes Here
      </div>
      <div class="e-section__actions">
        <button class="e-btn e-btn-borderless e-btn-onlyicon" onclick="closePanel1()">
          <e-icon icon="close"></e-icon>
        </button>
      </div>
    </div>
    <div class="e-section__content">
      Content for the floating panel goes here.
    </div>
  </div>
</div>
Copy Javascript
Copied to clipboard! 
function openPanel1() {
  document.getElementById('floatingPanel1').classList.remove('e-hidden');
}

function closePanel1() {
  document.getElementById('floatingPanel1').classList.add('e-hidden');
}
<button class="e-btn" onclick="openPanel2()">
  Open Floating Panel
</button>
<div class="e-floating-panel e-floating-panel__align-right e-hidden" id="floatingPanel2">
  <div class="e-section">
    <div class="e-section__header">
      <div class="e-section__title">
        Title Goes Here
      </div>
      <div class="e-section__actions">
        <button class="e-btn e-btn-borderless e-btn-onlyicon" onclick="closePanel2()">
          <e-icon icon="close"></e-icon>
        </button>
      </div>
    </div>
    <div class="e-section__content">
      Content for the floating panel goes here.
    </div>
  </div>
</div>
Copy Javascript
Copied to clipboard! 
function openPanel2() {
  document.getElementById('floatingPanel2').classList.remove('e-hidden');
}

function closePanel2() {
  document.getElementById('floatingPanel2').classList.add('e-hidden');
}