Lightbox Dialog Component

<div
  aria-labelledby="lightbox-dialog-title"
  aria-modal="true"
  class="lightbox-dialog"
  hidden
  role="dialog"
>
  <div class="lightbox-dialog__window">
    <div class="lightbox-dialog__header">
      <h2 id="lightbox-dialog-title" class="large-text-1 bold-text">Heading</h2>
      <button
        aria-label="Close dialog"
        class="icon-btn lightbox-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="lightbox-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>

The lightbox scales vertically and adds scrollbars when content overflows the viewport.

<div
  aria-labelledby="dialog-title"
  aria-modal="true"
  class="dialog dialog--no-mask"
  hidden
  role="dialog"
>
  <div class="lightbox-dialog__window lightbox-dialog__window--full">
    <div class="lightbox-dialog__header">
      <h2 id="dialog-title" class="large-text-1 bold-text">Heading</h2>
      <button
        aria-label="Close dialog"
        class="icon-btn lightbox-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="lightbox-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>Lorem ... 1</p>
      <p>Lorem ... 2</p>
      <p>(you get the idea)</p>
      <p>Lorem ... n</p>
      <p>
        <a href="https://www.ebay.com"> www.ebay.com </a>
      </p>
    </div>
  </div>
</div>

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

<div
  aria-labelledby="lightbox-dialog-title"
  aria-modal="true"
  class="lightbox-dialog"
  hidden
  role="dialog"
>
  <div class="lightbox-dialog__window">
    <div class="lightbox-dialog__header">
      <button
        aria-label="Go back"
        class="icon-btn lightbox-dialog__prev"
        type="button"
      >
        <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
          <use href="#icon-chevron-left-16" />
        </svg>
      </button>
      <h2 id="lightbox-dialog-title" class="large-text-1 bold-text">Heading</h2>
      <button
        aria-label="Close dialog"
        class="icon-btn lightbox-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="lightbox-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>

To have a wider lightbox add lightbox-dialog--wide to the dialog

On small screens, a wide lightbox will span almost the entire screen. This is the suggeested replacement for fullscreen dialog

<div
  aria-labelledby="lightbox-dialog-title"
  aria-modal="true"
  class="lightbox-dialog lightbox-dialog--wide"
  hidden
  role="dialog"
>
  <div class="lightbox-dialog__window">
    <div class="lightbox-dialog__header">
      <button
        aria-label="Go back"
        class="icon-btn lightbox-dialog__prev"
        type="button"
      >
        <svg aria-hidden="true" class="icon icon--16" height="16" width="16">
          <use href="#icon-chevron-left-16" />
        </svg>
      </button>
      <h2 id="lightbox-dialog-title" class="large-text-1 bold-text">Heading</h2>
      <button
        aria-label="Close dialog"
        class="icon-btn lightbox-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="lightbox-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>

To have a thinner lightbox add lightbox-dialog--narrow to the dialog

<div
  aria-labelledby="lightbox-dialog-title"
  aria-modal="true"
  class="lightbox-dialog lightbox-dialog--narrow"
  hidden
  role="dialog"
>
  <div class="lightbox-dialog__window">
    <div class="lightbox-dialog__header">
      <h2 id="lightbox-dialog-title" class="large-text-1 bold-text">Heading</h2>
      <button
        aria-label="Close dialog"
        class="icon-btn lightbox-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="lightbox-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>

To have a large lightbox add lightbox-dialog--large to the dialog

On small screens, a large lightbox will span almost the entire screen. This is the suggeested replacement for fullscreen dialog

<div
  aria-labelledby="lightbox-dialog-title"
  aria-modal="true"
  class="lightbox-dialog lightbox-dialog--large"
  hidden
  role="dialog"
>
  <div class="lightbox-dialog__window">
    <div class="lightbox-dialog__header">
      <h2 id="lightbox-dialog-title" class="large-text-1 bold-text">Heading</h2>
      <button
        aria-label="Close dialog"
        class="icon-btn lightbox-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="lightbox-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>

Any lightbox can be transitioned in and out, using the lightbox-dialog__window--animate and lightbox-dialog--mask-fade modifiers. On large screens, animate will fade in and on small screens the panel will slide in from the bottom.

The default fade duration is 16ms.

<div
  aria-labelledby="lightbox-dialog-title"
  aria-modal="true"
  class="lightbox-dialog lightbox-dialog--mask-fade"
  hidden
  role="dialog"
>
  <div class="lightbox-dialog__window lightbox-dialog__window--animate">
    <div class="lightbox-dialog__header">
      <h2 id="lightbox-dialog-title" class="large-text-1 bold-text">Heading</h2>
      <button
        aria-label="Close dialog"
        class="icon-btn lightbox-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="lightbox-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>

Call to action buttons can be placed in an optional footer section. They will be aligned to the end of the horizontal axis by default.

<div
  aria-labelledby="lightbox-dialog-title"
  aria-modal="true"
  class="lightbox-dialog"
  hidden
  role="dialog"
>
  <div class="lightbox-dialog__window">
    <div class="large-text-1 lightbox-dialog__header">
      <h2 class="large-text-1 bold-text" id="lightbox-dialog-title">Heading</h2>
      <button
        aria-label="Close dialog"
        class="icon-btn lightbox-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="lightbox-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>
    </div>
    <div class="lightbox-dialog__footer">
      <button class="btn">Button 1</button>
      <button class="btn">Button 2</button>
      <button class="btn">Button 3</button>
    </div>
  </div>
</div>

An image may be added to the lightbox header for a more expressive experience. Image will be cropped to a hardcoded height as per design standards.

<div
  aria-labelledby="lightbox-dialog-title"
  aria-modal="true"
  class="lightbox-dialog lightbox-dialog--expressive"
  hidden
  role="dialog"
>
  <div class="lightbox-dialog__window">
    <div
      class="lightbox-dialog__image"
      style="background-image: url(/img/tb-landscape-pic.jpg)"
    />
    <div class="lightbox-dialog__header">
      <h2 id="lightbox-dialog-title" class="large-text-1 bold-text">Heading</h2>
      <button
        aria-label="Close dialog"
        class="icon-btn lightbox-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="lightbox-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>

Layout Grid Component Link Component

Lightbox Dialog Component

Scrolling Lightbox

Previous button in header Lightbox

Wide Lightbox

Narrow Lightbox

Large Lightbox

Transitioned Lightbox

Footer in Lightbox

Expressive Lightbox