Panel Dialog Component

<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>

Panel dialog with Previous button

If you want to add a previous button to the panel dialog, add the icon button before the dialog heading tag.

<div
  aria-labelledby="dialog-title"
  aria-modal="true"
  class="panel-dialog"
  hidden
  role="dialog"
>
  <div class="panel-dialog__window">
    <div class="panel-dialog__header">
      <button
        aria-label="Go back"
        class="icon-btn panel-dialog__prev"
        type="button"
      >
        <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
          <icon-symbol name="chevron-left-16" />
        </svg>
      </button>
      <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>

Panel dialog with footer

<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>

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.

<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>

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 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>