Skin CSS Framework

Main Navigation

CSS Components

Guides

@ebay/skin/panel-dialog

DS v2

Panel dialogs are modal and require a close button. They fill the entire y-axis of the screen and a portion of the x-axis.

The dialog must remain in a hidden state for all users and devices until opened.

End Panel

Apply the panel-dialog__window--end modifier to display the panel at the end of the x-axis.

End panels typically contain an additional CTA button.

Sliding Panel

Panels can slide in and out, using the dialog__window--slide modifier.

The slide transition duration is 32ms. An accompanying dialog--mask-fade-slow modifier on the panel-dialog should also be applied. This slower fade matches the 32ms of the slide transition.

<div
  aria-labelledby="dialog-title"
  aria-modal="true"
  class="panel-dialog"
  hidden
  id="dialog-right-panel-1"
  role="dialog"
>
  <div class="panel-dialog__window panel-dialog__window--end">
    <div class="panel-dialog__header">
      <h2 id="dialog-title" class="panel-dialog__title large-text-1 bold-text">
        Heading
      </h2>
      <button class="fake-link panel-dialog__reset" type="button">Done</button>
    </div>
    <div class="panel-dialog__main">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        <a href="https://www.ebay.com"> www.ebay.com </a>
      </p>
    </div>
  </div>
</div>

<div
  aria-labelledby="dialog-title"
  aria-modal="true"
  class="panel-dialog"
  hidden
  role="dialog"
>
  <div class="panel-dialog__window">
    <div class="panel-dialog__header">
      <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
      <button
        aria-label="Close dialog"
        class="icon-btn panel-dialog__close"
        type="button"
      >
        <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
          <use href="#icon-close-16" />
        </svg>
      </button>
    </div>
    <div class="panel-dialog__main">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        <a href="https://www.ebay.com"> www.ebay.com </a>
      </p>
    </div>
  </div>
</div>

<div
  aria-labelledby="dialog-title"
  aria-modal="true"
  class="panel-dialog panel-dialog--mask-fade-slow"
  hidden
  role="dialog"
>
  <div class="panel-dialog__window panel-dialog__window--slide">
    <div class="panel-dialog__header">
      <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
      <button
        aria-label="Close dialog"
        class="icon-btn panel-dialog__close"
        type="button"
      >
        <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
          <use href="#icon-close-16" />
        </svg>
      </button>
    </div>
    <div class="panel-dialog__main">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        <a href="https://www.ebay.com"> www.ebay.com </a>
      </p>
    </div>
  </div>
</div>

<div
  aria-labelledby="dialog-title"
  aria-modal="true"
  class="panel-dialog"
  hidden
  role="dialog"
>
  <div class="panel-dialog__window">
    <div class="panel-dialog__header">
      <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
      <button
        aria-label="Close dialog"
        class="icon-btn panel-dialog__close"
        type="button"
      >
        <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
          <use href="#icon-close-16" />
        </svg>
      </button>
    </div>
    <div class="panel-dialog__main">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
      <p>
        <a href="https://www.ebay.com"> www.ebay.com </a>
      </p>
    </div>
    <div class="panel-dialog__footer">
      <button class="btn btn--primary">Submit</button>
      <button class="btn">Cancel</button>
    </div>
  </div>
</div>

@ebay/skin/panel-dialog

Panel dialog with footer

End Panel

Sliding Panel