Dialog Component

Dialog base element

The dialog element uses the native html <dialog> element in order to satisfy all the accessibility requirements.

This element is styled to look like a custom inplementation.

<button class="btn btn--primary dialog-trigger" type="button">
  Open Dialog
</button>

<dialog aria-labelledby="dialog-title-base" class="dialog">
  <div class="dialog__header">
    <h2 id="dialog-title-base">Dialog</h2>
    <button
      class="icon-btn dialog__close"
      type="button"
      aria-label="Close Dialog"
    >
      <svg class="icon icon--16" aria-hidden="true">
        <use href="#icon-close-16"></use>
      </svg>
    </button>
  </div>
  <div class="dialog__main">
    <h3>Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis
      molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum
      lorem, eu sodales velit sagittis id.
    </p>
    <p><a href="http://www.ebay.com">www.ebay.com</a></p>
    <h3>Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis
      molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum
      lorem, eu sodales velit sagittis id.
    </p>
    <p><a href="http://www.ebay.com">www.ebay.com</a></p>
  </div>
</dialog>

Previous button in header Dialog

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

<button class="btn btn--primary dialog-trigger" type="button">
  Open Dialog
</button>

<dialog aria-labelledby="dialog-title-base-prev" class="dialog">
  <div class="dialog__header">
    <button class="icon-btn dialog__prev" type="button" aria-label="Go back">
      <svg class="icon icon--16" aria-hidden="true">
        <use href="#icon-chevron-left-16"></use>
      </svg>
    </button>
    <h2 id="dialog-title-base-prev">Dialog</h2>
    <button
      class="icon-btn dialog__close"
      type="button"
      aria-label="Close Dialog"
    >
      <svg class="icon icon--16" aria-hidden="true">
        <use href="#icon-close-16"></use>
      </svg>
    </button>
  </div>
  <div class="dialog__main">
    <h3>Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis
      molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum
      lorem, eu sodales velit sagittis id.
    </p>
    <p><a href="http://www.ebay.com">www.ebay.com</a></p>
    <h3>Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis
      molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum
      lorem, eu sodales velit sagittis id.
    </p>
    <p><a href="http://www.ebay.com">www.ebay.com</a></p>
  </div>
</dialog>

Wide Dialog

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

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

<button class="btn btn--primary dialog-trigger" type="button">
  Open Dialog
</button>

<dialog aria-labelledby="dialog-title-wide" class="dialog dialog--wide">
  <div class="dialog__header">
    <h2 id="dialog-title-wide">Dialog</h2>
    <button
      class="icon-btn dialog__close"
      type="button"
      aria-label="Close Dialog"
    >
      <svg class="icon icon--16" aria-hidden="true">
        <use href="#icon-close-16"></use>
      </svg>
    </button>
  </div>
  <div class="dialog__main">
    <h3>Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis
      molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum
      lorem, eu sodales velit sagittis id.
    </p>
    <p><a href="http://www.ebay.com">www.ebay.com</a></p>
    <h3>Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis
      molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum
      lorem, eu sodales velit sagittis id.
    </p>
    <p><a href="http://www.ebay.com">www.ebay.com</a></p>
  </div>
</dialog>

Narrow Dialog

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

<button class="btn btn--primary dialog-trigger" type="button">
  Open Dialog
</button>

<dialog aria-labelledby="dialog-title-narrow" class="dialog dialog--narrow">
  <div class="dialog__header">
    <h2 id="dialog-title-narrow">Dialog</h2>
    <button
      class="icon-btn dialog__close"
      type="button"
      aria-label="Close Dialog"
    >
      <svg class="icon icon--16" aria-hidden="true">
        <use href="#icon-close-16"></use>
      </svg>
    </button>
  </div>
  <div class="dialog__main">
    <h3>Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis
      molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum
      lorem, eu sodales velit sagittis id.
    </p>
    <p><a href="http://www.ebay.com">www.ebay.com</a></p>
    <h3>Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis
      molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum
      lorem, eu sodales velit sagittis id.
    </p>
    <p><a href="http://www.ebay.com">www.ebay.com</a></p>
  </div>
</dialog>

Large Dialog

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

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

<button class="btn btn--primary dialog-trigger" type="button">
  Open Dialog
</button>

<dialog aria-labelledby="dialog-title-large" class="dialog dialog--large">
  <div class="dialog__header">
    <h2 id="dialog-title-large">Dialog</h2>
    <button
      class="icon-btn dialog__close"
      type="button"
      aria-label="Close Dialog"
    >
      <svg class="icon icon--16" aria-hidden="true">
        <use href="#icon-close-16"></use>
      </svg>
    </button>
  </div>
  <div class="dialog__main">
    <h3>Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis
      molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum
      lorem, eu sodales velit sagittis id.
    </p>
    <p><a href="http://www.ebay.com">www.ebay.com</a></p>
    <h3>Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis
      molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum
      lorem, eu sodales velit sagittis id.
    </p>
    <p><a href="http://www.ebay.com">www.ebay.com</a></p>
  </div>
</dialog>

Footer in Dialog

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.

<button class="btn btn--primary dialog-trigger" type="button">
  Open Dialog with Footer
</button>

<dialog aria-labelledby="dialog-title-base-with-footer" class="dialog">
  <div class="dialog__header">
    <h2 id="dialog-title-base-with-footer">Dialog</h2>
    <button
      class="icon-btn dialog__close"
      type="button"
      aria-label="Close Dialog"
    >
      <svg class="icon icon--16" aria-hidden="true">
        <use href="#icon-close-16"></use>
      </svg>
    </button>
  </div>
  <div class="dialog__main">
    <h3>Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis
      molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum
      lorem, eu sodales velit sagittis id.
    </p>
    <p><a href="http://www.ebay.com">www.ebay.com</a></p>
    <h3>Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis
      molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum
      lorem, eu sodales velit sagittis id.
    </p>
    <p><a href="http://www.ebay.com">www.ebay.com</a></p>
  </div>
  <div class="dialog__footer">
    <button class="btn btn--primary">Submit</button>
    <button class="btn">Cancel</button>
  </div>
</dialog>

Expressive Dialog

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

<button class="btn btn--primary dialog-trigger" type="button">
  Open Expressive Dialog
</button>

<dialog
  aria-labelledby="dialog-title-expressive-base"
  class="dialog dialog--expressive"
>
  <div
    class="dialog__image"
    style="
      background-image: url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-landscape-pic.jpg);
    "
  ></div>
  <div class="dialog__header">
    <h2 id="dialog-title-expressive-base">Dialog</h2>
    <button
      class="icon-btn dialog__close"
      type="button"
      aria-label="Close Dialog"
    >
      <svg class="icon icon--16" aria-hidden="true">
        <use href="#icon-close-16"></use>
      </svg>
    </button>
  </div>
  <div class="dialog__main">
    <h3>Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis
      molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum
      lorem, eu sodales velit sagittis id.
    </p>
    <p><a href="http://www.ebay.com">www.ebay.com</a></p>
    <h3>Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis
      molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum
      lorem, eu sodales velit sagittis id.
    </p>
    <p><a href="http://www.ebay.com">www.ebay.com</a></p>
  </div>
</dialog>

Expressive Dialog with Previous Button

When a previous button is included in an expressive dialog, both the previous and close buttons will overlap the banner image.

<button class="btn btn--primary dialog-trigger" type="button">
  Open Expressive Dialog
</button>

<dialog
  aria-labelledby="dialog-title-expressive-prev"
  class="dialog dialog--expressive"
>
  <div
    class="dialog__image"
    style="
      background-image: url(https://ir.ebaystatic.com/cr/v/c01/skin/docs/tb-landscape-pic.jpg);
    "
  ></div>
  <div class="dialog__header">
    <button class="icon-btn dialog__prev" type="button" aria-label="Go back">
      <svg class="icon icon--16" aria-hidden="true">
        <use href="#icon-chevron-left-16"></use>
      </svg>
    </button>
    <h2 id="dialog-title-expressive-prev">Dialog</h2>
    <button
      class="icon-btn dialog__close"
      type="button"
      aria-label="Close Dialog"
    >
      <svg class="icon icon--16" aria-hidden="true">
        <use href="#icon-close-16"></use>
      </svg>
    </button>
  </div>
  <div class="dialog__main">
    <h3>Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis
      molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum
      lorem, eu sodales velit sagittis id.
    </p>
    <p><a href="http://www.ebay.com">www.ebay.com</a></p>
    <h3>Heading</h3>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus convallis
      molestie erat, ut adipiscing risus blandit vel. Vivamus luctus elementum
      lorem, eu sodales velit sagittis id.
    </p>
    <p><a href="http://www.ebay.com">www.ebay.com</a></p>
  </div>
</dialog>