Slideout

A modal dialog is a dialog that appears on top of the main content and moves the system into a special mode requiring user interaction

Click on the button below to toggle the modal dialog.

Slideout

Content for the slideout goes here. You can place just about any component or custom elements here.

Usage

You must use a link element to toggle the Slideout component just like <a href="#slideout" data-slideout-toggle>Open Slideout</a>. The link should point to the id of the Slideout container Use any class do you prefer to style the toggle.

The Slideout panel should have the data-slideout-panel attribute. Apart from data-slideout-header, you can put any content inside the panel.

<a href="#slideout">Open Slideout</a>

<div id="slideout" data-slideout-panel>
  <div data-slideout-header>
    <h3>Slideout</h3>
    <a href="#" data-slideout-close>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
    </a>
  </div>
  <p>Content for the slideout goes here. You can place just about any component or custom elements here.
</p>
</div>

Variables

List of variables used. Customize the component’s design by changing or overriding these values:

  --slideout-animation: left .2s ease-in-out;
  --slideout-background: #fff;
  --slideout-shadow-color: #9ca3af;
  --slideout-padding: 1rem;
  --slideout-position: -100%;
  --slideout-size: 33vw;

Some variables are commented. Remove the comment if you want to change the style of tabs.