Drawer

<ins-button 
  label="Open Inner" 
  solid color="blue" 
  id="openDrawerEl">
</ins-button>

<ins-button 
  label="Open Outer" 
  solid 
  color="blue" 
  id="openOuterDrawerEl">
</ins-button>

<!-- Drawer inside iframe -->

<ins-drawer 
  label="Inner Drawer" 
  custom-width="550px" 
  position="left" 
  icon="icon-star" 
  id="drawerEl">

  <h4>Hello World</h4>

  <p>You can add any HTML element here. Use <code>custom-width</code> attribute to set your custom width.</p>

  <ins-input 
    label="Name">
  </ins-input>

  <ins-input 
    label="Email">
  </ins-input>

  <div style="text-align: right;">

    <ins-button 
      solid 
      color="blue" 
      label="Save">
    </ins-button>

  </div>

</ins-drawer>

<script>
  // this button opens the <ins-drawer> inside of the iframe
  document.getElementById('openDrawerEl').addEventListener('insClick', function() {
    document.getElementById('drawerEl').setDrawerState(true);
  });
  // this button opens the <ins-drawer> outside of the iframe
  document.getElementById('openOuterDrawerEl').addEventListener('insClick', function () {
    parent.document.getElementById('drawerOutsideEl').setDrawerState(true);
  });
</script>

<ins-button 
  label="Open" 
  solid 
  color="blue" 
  id="openEventDrawer">
</ins-button>

<ins-drawer 
  label="Sample" 
  show-header="false" 
  id="eventDrawerEl">
  
  <h4>Hello World</h4>

  <p>This drawer sample has no heading.</p>

  <p>See console log for event data.</p>
 
 <hr>

  <p>
    This is a sample content.
  </p>

</ins-drawer>

<script>
  // button event to open drawer
  document.getElementById('openEventDrawer').addEventListener('insClick', function () {
    document.getElementById('eventDrawerEl').setDrawerState(true);
  });
  // Drawer event listener
  document.getElementById('eventDrawerEl').addEventListener('toggleDrawer', function (event) {
    console.log("Toggle Drawer", event.detail)
  });
</script>

<ins-button 
  id="toggleButton" 
  label="Open">
</ins-button>

<ins-notifications 
  id="sample-notification">

<ins-notifications-item 
  event-type="Task Completed" 
  heading="Heading" 
  duration="5 mins ago" 
  desc="This is a sample content."
  link="/" link-label="View Task" 
  icon="icon-check" 
  status="green">

</ins-notifications-item>

</ins-notifications>

<script>
    var insNotificationsEl = document.getElementById('sample-notification');
    var toggleButton = document.getElementById('toggleButton');
    toggleButton.addEventListener('click', function () {
      insNotificationsEl.toggleNotificationshandler();
    });
</script>